Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Bovino

0PARTAGES

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
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 :

Une erreur dans cette actualité ? Signalez-le nous !