AJAX (XMLHTTPRequest) délai

Question

Je suis nouveau à AJAX et j'ai ce problème.

Je crée une page de photogallery et j'ai créé une classe Javascript qui gère le tout. Voici une méthode de la classe qui appelle objet XMLHttpRequest qui a été initialisé avec succès plus tôt:

this.AJAX_update = function(id) { 
    //initialize AJAX - this is done successfully 
    this.AJAX_initialize(); 
    var url = "ScriptLibrary/gallery_update.php?img=" + id; 
    //this.ajax_request is an internal variable which is 
    //initialized in this.AJAX_initialize() and is 
    //XMLHTTPRequest type 
    this.ajax_request.open("GET", url, true); 
    this.ajax_request.onreadystatechange = processAJAX; 
    this.ajax_request.send(null); 
} 

Je ne pouvais pas comprendre comment la classe appeler méthode interne onreadystatechange, donc je créé une fonction en dehors de la classe qui appelle une méthode dans la classe à condition que l'instance de la classe ait été créée sur la page qu'elle est. L'instance de la classe sur la page est la variable 'gallery'. Voici la fonction:

function processAJAX() { 
    gallery.AJAX_process(); 
} 

Voici le code de la fonction AJAX_process():

this.AJAX_process = function() { 
    if (this.ajax_request.readyState == 4) { 
     if (this.ajax_request.status == 200) { 
      //get the response 
      var response = this.ajax_request.responseXML; 

      //Here I set the internal variables according to the value 
      //returned from the server 
      //........... 
      //........... 
      //........... 

      //change image on the page 
      var self = this; 
      setTimeout(function() { 
       self.swap_dissolve(); 
      }, 50); 

     } 
    } 
} 

Alors, voici ma question:

Dans un premier temps j'ai essayé d'appeler la fonction interne en faisant simplement this.swap_dissolve() mais cela ne fonctionne pas. Fondamentalement, la méthode AJAX_process() modifie les valeurs des variables internes de certaines classes en fonction de la réponse du serveur, et ces valeurs sont utilisées dans swap_dissolve() pour réellement changer l'image sur la page. Ce qui se passerait, c'est que swap_dissolve() ne changerait pas l'image correctement car elle voyait des valeurs nulles ou non mises à jour des variables AJAX_process() mises à jour. Lorsque j'ai ajouté le délai, le problème a disparu. Je ne comprends pas pourquoi cela se passe. Je vérifie que le readyState == 4, donc la réponse du serveur a été complètement retournée, donc quelles que soient les valeurs que la fonction définit, sont définitives et peuvent être utilisées immédiatement, alors pourquoi ne puis-je pas utiliser ces valeurs tout de suite et avoir attendre?

Toutes les suggestions ou les défauts dans mon code pour résoudre ce problème seraient très appréciés.

Si vous avez des questions, veuillez poster une réponse à cette question.

Merci.

Answer 1

Vous souhaitez utiliser une 'fermeture' (par exemple, passez un objet-fonction à setTimeout).

Imaginez (diable, remplacez dans votre code pour voir):

// when response = 200 
var someValue = "blahblah" // whatever you read in 
setTimeout(function() { 
    alert(someValue) 
}, 1000) 

L'alerte doit afficher « blabla » (ou quoi que vous lui avez assigné). La valeur est disponible pour l'objet de fonction anonyme car une liaison de fermeture a été créée (la fonction peut accéder aux variables de la ou des fonctions englobantes)

Voici une référence: http://jibbering.com/faq/notes/closures/ et plus d'une intro souple: http://blog.morrisjohns.com/javascript_closures_for_dummies.html

bonne codage

Edit/PS Vous pouvez également écrire le gestionnaire AJAX comme (il est juste une fermeture pour forcer la bonne « ce » contexte - certains cadres offrent des fonctions de commodité pour cela).

var self = this 
this.ajax_request.onreadystatechange = function() { 
    self.process_AJAX() 
} 

Vous pouvez même utiliser une double-liaison, mais ... heureux codage, encore une fois :-)