[Autre] Un classique AJAX : utiliser les données au bon moment !

[Bovino]

S'il est une erreur classique chez les débutants en AJAX, que l'on retrouve régulièrement sur le forum AJAX, c'est de vouloir utiliser les données du serveur avant de les avoir reçues.

Faisons une petite analogie.
Imaginons que vous ayez une poule. Tous les matins, vous souhaitez savoir combien d'œufs ont été pondus, vous envoyez donc quelqu'un les compter.
J'imagine, qu'au moment même où cette personne part compter les œufs, il ne vous viendrait pas à l'esprit de l'appeler pour lui demander le compte : la moindre des choses est d'attendre qu'elle soit revenue car avant, elle ne connait pas l'information !

Avec AJAX, c'est exactement pareil. Le premier A de l'acronyme signifie asynchronous (asynchrone), c'est-à-dire que JavaScript ne va pas attendre la réponse du serveur avant de continuer à exécuter le code, sauf bien entendu si vous avez spécifié le mode synchrone.
Ainsi, le seul moment où l'on est sûr d'avoir reçu la réponse est lorsque la propriété readyState de l'objet XMLHttpRequest vaut 4 et que la propriété status correspond à un code de réussite de la requête (classiquement 200). C'est pourquoi tous les traitements se basant sur la réponse du serveur doivent être traités dans le callback de la requête..

Avant d'écrire son code, il est donc fondamental de se demander si les données que l'on veut utiliser existent ou non.

A titre d'exemple, un petit code :

Code :

1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest(), monResultat; 
xhr.open('POST', url); 
xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4 && xhr.status == 200){ 
        monResultat = xhr.responseText; 
        alert(monResultat); 
    } 
}; 
xhr.send('variable=valeur'); 
alert(maVariable);

Ici, le premier alert() affiché sera celui de la dernière ligne : JavaScript n'attend pas la réponse du serveur pour continuer à exécuter le code et cette alerte affichera undefined, puisqu'au moment où cette instruction est interprétée, aucune affectation n'a encore été faite pour maVariable ! Puis, lorsque le serveur aura répondu, le second alert() sera affiché avec cette fois la valeur attendue.

Voir aussi :

• Vos premiers pas dans les nouvelles technologies
• Comprendre les mécanismes d'AJAX
• La FAQ AJAX

Billet original publié sur les blogs de developpez.com...
Billet original