[AJAX] Test retour requête => bloquage

Version imprimable

Bonjour

Je viens de voir que je traitais trop tôt le retour de l'appel AJAX. Je me suis dit, pas grâve, il suffit d'attendre.

Code:

while (xhr.readyState!=4);

Comme l'attente bloquait le système, j'ai rajouté une première série de marqueurs (innerHTML). Comme ça bloquait encore, j'ai rajouté des alert, et là, ça passe sans problème :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 xhr.open("GET",url,true); xhr.send(null); anc=-1; while (xhr.readyState!=4) { if (xhr.readyState==0 && anc!=0) { document.getElementById("liste").innerHTML="Requête Non initialisée"; alert("Requête Non initialisée"); anc=0 } else if (xhr.readyState==1 && anc!=1) { document.getElementById("liste").innerHTML="La requête vient de s'ouvrir"; alert("La requête vient de s'ouvrir") anc=1 } else if (xhr.readyState==2 && anc!=2) { document.getElementById("liste").innerHTML="La requête vient d'être envoyée"; alert("La requête vient d'être envoyée") anc=2 } else if (xhr.readyState==3 && anc!=3) { document.getElementById("liste").innerHTML="Les données arrivent"; alert("Les données arrivent"); anc=3 } } return xhr
Ceci dit, je me passerai bien de la fenêtre générée par le alert et j'aimerai bien que ça marche !

nb : la fenêtre du alert m'indique "La requête vient de s'ouvrir". Et après, je sorts et tout va bien.

08/09/2009, 11h09
E.Bzz

Bonjour,
en asynchrone, tu n'as pas besoin d'attendre explicitement (c'est à dire via une boucle comme tu l'as fait) le retour d'Ajax : la propriété onreadystatechange, à laquelle tu associes une fonction anonyme qui fera le traitement de la réponse, est là pour ça ;)

A+

Ta boucle while est superflue ici et pourrait être avantageusement remplacée par l'utilisation de la propriété onreadystatechange.

Classiquement, cela donne : (exemple en GET)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
try {
   var xhr = getXhr();
   xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
         if (xhr.status == 200) {
            // traitement au retour de l'appel
         }
         else {
            // traitement d'erreur (serveur)
         }
      }
   }
   xhr.open("GET", tonUrl, true);
   xhr.send(null);
}
catch (e) {
   // traitement d'erreur (local)
}

08/09/2009, 11h59
troumad

Merci pour vos réponses.

Ce que je vous ai montré est en fait une fonction qui retourne un xhr que j'aimerai savoir complet lors d'un return qui se trouve juste à la fin du code (rajout fait maintenant).

Pour le moment, j'ai effectivement déjà utilisé onreadystatechange en réception de la fonction. Mais je ne souhaite pas :
1) modifier tous mes appels déjà fait
2) mettre un onreadystatechange après tous mes futurs appels : je préférerais un code plus simple.
08/09/2009, 12h02
E.Bzz

Citation:

Envoyé par troumad

2) mettre un onreadystatechange après tous mes futurs appels : je préférerais un code plus simple.

Heu ... c'est la manière la plus simple de coder cette partie là ... :?

A+
08/09/2009, 12h09
troumad

Citation:

Envoyé par E.Bzz

Heu ... c'est la manière la plus simple de coder cette partie là ... :?

C'est bien ce qu'il m'a semblé. Le reste est plus compliqué :aie:, mais pas infaisable j'espère !
08/09/2009, 12h15
E.Bzz

Finalement, ce que tu souhaites semble plus ressembler à des appels synchrones ...
Tu as essayé, pour voir si ça correspond au fonctionnement de ta page ?
(dans ce cas, pas de onreadystatechange ;) )

A+

Citation:

Envoyé par troumad

Pour le moment, j'ai effectivement déjà utilisé onreadystatechange en réception de la fonction. Mais je ne souhaite pas :
1) modifier tous mes appels déjà fait
2) mettre un onreadystatechange après tous mes futurs appels : je préférerais un code plus simple.

Rien ne t'empêche de mettre le onreadystatechange dans ta création du xhr :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
xhr.open("GET",url,true);
  xhr.send(null);
  xhr.onreadystatechange = function(){
   if (xhr.readyState==0)      
   {
    document.getElementById("liste").innerHTML="<p>Requête Non initialisée</p>";
    alert("<p>Requête Non initialisée</p>");
   }
   else if (xhr.readyState==1)
   {
    document.getElementById("liste").innerHTML="<p>La requête vient de s'ouvrir</p>";
    alert("<p>La requête vient de s'ouvrir</p>");
   }
   else if (xhr.readyState==2)
   {
    document.getElementById("liste").innerHTML="<p>La requête vient d'être envoyée</p>";
    alert("<p>La requête vient d'être envoyée</p>");
   }
   else if (xhr.readyState==3)
   {
    document.getElementById("liste").innerHTML="<p>Les données arrivent</p>";
    alert("<p>Les données arrivent</p>");
   }
  }
 
  return xhr

08/09/2009, 12h22
troumad

Citation:

Envoyé par Bovino

Rien ne t'empêche de mettre le onreadystatechange dans ta création du xhr :

Ta méthode ne certifie pas que lors du retour de la fonction, l'appel est complètement fini avec un retour complet de l'information.
Mon but est de me passer de l'alert qui n'est pas que pour débugger !
08/09/2009, 12h27
troumad

Citation:

Envoyé par E.Bzz

Finalement, ce que tu souhaites semble plus ressembler à des appels synchrones ...
Tu as essayé, pour voir si ça correspond au fonctionnement de ta page ?
(dans ce cas, pas de onreadystatechange ;) )

Je viens d'essayer, il me semble que tu touches à la vérité.
Mon essai a été un echec. Je dois aller manger... Je continuerais demain. Autre chose à l'emploi du temps de cette après midi !
08/09/2009, 12h30
E.Bzz
Citation:

Envoyé par troumad

Ta méthode ne certifie pas que lors du retour de la fonction, l'appel est complètement fini avec un retour complet de l'information.

Si, de même que dans les autres codes.
Dès que les conditions ci-dessous sont réunis
Code:

1 2 if (xhr.readyState == 4) { if (xhr.status == 200) {
c'est que le retour est complet.
Or le test est réalisé par l'objet xhr lui-même, à chaque fois que l'"état" de la requête change (d'où le nom), ce qui fait que c'est de cette manière que tu as la meilleure information sur l'avancement (et donc la complétude) de ta requête ...

A+
08/09/2009, 12h58
troumad
Citation:
Envoyé par E.Bzz

Code:

1 2 if (xhr.readyState == 4) { if (xhr.status == 200) {

c'est que le retour est complet.
Or le test est réalisé par l'objet xhr lui-même, à chaque fois que l'"état" de la requête change (d'où le nom), ce qui fait que c'est de cette manière que tu as la meilleure information sur l'avancement (et donc la complétude) de ta requête ...
Selon moi le retour de ma fonction n'aura lieu que si lors du passage sur le test, l'appel est fini. Sinon, il n'y aura pas de retour !
Non ?
08/09/2009, 14h13
E.Bzz

Citation:

Envoyé par troumad

Selon moi le retour de ma fonction n'aura lieu que si lors du passage sur le test, l'appel est fini. Sinon, il n'y aura pas de retour !

Pas bien compris .... :?
Mais le "passage sur le test" a lieu à chaque modification de l'état du xhr, jusqu'à réception de la réponse (un peu ce que tu fais dans ta boucle) ...
Il passe donc forcément sur le test lors de la réception de la réponse (même si le test a été fait sans succès plusieurs fois précédemment).

Mais je te laisse tester la version synchrone ;)

A+
08/09/2009, 15h24
Bovino

Pour ma part, ce que je ne comprends pas, c'est pourquoi vouloir renvoyer l'objet xhr une fois la requête terminée :koi:
Mais apparemment, c'est bien une requête synchrone dont tu as besoin...
08/09/2009, 17h20
DoubleU
De la façon dont Bovino l'a écrit, le retour de ta fonction se fait immédiatement après l'envoi de la requête, ce qui est tout a fait normal lors d'un appel asynchrone (tu crées un autre processus qui va effectuer le traitement, donc le processus "pere", continue de s'exécuter immédiatement, quoi que fasse le processus "fils").

A mon avis, tu prends le problème a l'envers: plutot que d'attendre la fin de la requete pour retourner ton objet xhr et effectuer le morceau de code suivant, tu devrais soit:
- exécuter le code suivant dans la fonction de rappel des que la requete est terminée
- passer ta requete en synchrone, mais cay le mal (hors besoins tres particuliers)

Exemple pour la premiere solution:
Code:

1 2 3 4 5 6 7 8 9 10 11 function ajax(url, onComplete) { var xhr = getXhr(); xhr.onreadystatechange = function(xhr) { if(xhr.readystate == 4 && xhr.status == 200) { onComplete(xhr). } } }
Code:

1 2 3 4 5 6 7 function maFonctionAExecuterApresLaRequete(xhr) { // du code a exécuter } // du code avant ajax("uneUrl",maFonctionAExecuterApresLaRequete)
De cette façon, tu t'assures que la requete est bien terminée pour exécuter ton code (c'est la méthode employée par tous les frameworks javascript).

J'ai pris ton idée DoubleU, mais tu avais oublié une majuscule...

Code:

1
2
3
4
5
6
7
  xhr.onreadystatechange = function()
  {
   if(xhr.readyState == 4 && xhr.status == 200)
   {
     fonction(xhr.responseText,param)
   }
  }

09/09/2009, 18h17
E.Bzz

C'est le fonctionnement classique d'Ajax en mode asynchrone ;)

A+
09/09/2009, 18h54
troumad

Oui, mais je ne savais pas qu'on pouvais envoyer en javascript le nom d'une fonction en paramètre :)
On dirait que ça ressemble à du C :ccool: