Discussion :

[troumad]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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="<p>Requête Non initialisée</p>";
    alert("<p>Requête Non initialisée</p>");
    anc=0
   }
   else if (xhr.readyState==1 && anc!=1)
   {
    document.getElementById("liste").innerHTML="<p>La requête vient de s'ouvrir</p>";
    alert("<p>La requête vient de s'ouvrir</p>")
    anc=1
   }
   else if (xhr.readyState==2 && anc!=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>")
    anc=2
   }
   else if (xhr.readyState==3 && anc!=3)
   {
    document.getElementById("liste").innerHTML="<p>Les données arrivent</p>";
    alert("<p>Les données arrivent</p>");
    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.

[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+

[RomainVALERI]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)
}

[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.

[E.Bzz]

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+

[troumad]

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é , mais pas infaisable j'espère !

[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+

[Bovino]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[troumad]

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 !

[troumad]

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 !

[E.Bzz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[troumad]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[E.Bzz]

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+

[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
Mais apparemment, c'est bien une requête synchrone dont tu as besoin...

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[troumad]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[E.Bzz]

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

A+

[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