IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

Bovino

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

Noter ce billet
par , 22/10/2014 à 16h32 (1285 Affichages)
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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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(monResultat);

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 monResultat ! Puis, lorsque le serveur aura répondu, le second alert() sera affiché avec cette fois la valeur attendue.

Voir aussi :

Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Viadeo Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Twitter Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Google Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Facebook Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Digg Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Delicious Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog MySpace Envoyer le billet « Un classique AJAX : utiliser les données au bon moment ! » dans le blog Yahoo

Mis à jour 19/02/2015 à 13h58 par Bovino

Catégories
Javascript , Développement Web

Commentaires