[AJAX] Instructions exécutées dans le désordre

**papa6** · 04/08/2011, 06h02

Bonjour,
J'ai un problème qui va certainement apparaitre normal pour nombreux d'entre vous car Ajax est "asynchrone", mais pourtant je ne trouve pas la solution...

Pour vérifier l'exécution de mon scritpt, j'ai mis des balises "ici 1", "ici 2", etc. :

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
function ajaxtp(element)
 {
  getXhr();
  xhr.onreadystatechange = function()
alert('ici 1, element vaut '+element);
   {
alert('ici 2, element puis readyState valent '+element+', readyState vaut '+xhr.readyState+', status vaut '+xhr.status);
    if(xhr.readyState == 4 && xhr.status == 200)
     {
alert('semble ok, ici 3, element vaut '+element);
      // Nous remplacons le contenu du div iris par le retour de "ajax/ajaxtp.php"
      document.getElementById(element).innerHTML = xhr.responseText;
     }
   }
alert('ici 4, element vaut '+element);
  xhr.open("POST",'ajax/ajaxtp.php',true);
alert('ici 5, element vaut '+element);  
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // On recupere la valeur de l'input ayant pour id: nserie
alert('ici 6, element vaut '+element);
  //...
  // On envoie a verifnserie le nserie recup&eacute;r&eacute;
alert('ici 7, element vaut '+element);
  xhr.send("element="+element);
alert('ici 8, element vaut '+element);
  }

Or, quand je l'exécute, l'affiche se fait dans le désordre

:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
ici 2, element puis readyState valent 4, readyState vaut 0, status vaut 0
ici 4, element vaut 4
ici 1, element vaut 4
ici 5, element vaut 4
ici 6, element vaut 4
ici 7, element vaut 4
ici 1, element vaut 4
ici 1, element vaut 4
ici 1, element vaut 4
ici 1, element vaut 4
ici 8, element vaut 4

Là, je suis perdu !
Merci à vous pour vos pistes

**andry.aime** · 04/08/2011, 07h50

Bonjour,

1-

xhr.onreadystatechange = function()
alert('ici 1, element vaut '+element);
{

C'est bizarre que ça marche

.

2- Que veux-tu faire? Je ne vois pas trop l'intérêt de vérifier la valeur de "element" à chaque étape comme ça sans que tu lui affectes une nouvelle valeur.

3- Tu peux aussi travailler en mode synchrone si c'est ton soucis.

A+.

**papa6** · 04/08/2011, 12h43

Merci Andry,

Envoyé par andry.aime

1-
xhr.onreadystatechange = function()
alert('ici 1, element vaut '+element);
{

C'est bizarre que ça marche

Ah oui

je ne m'en étais pas aperçu...
Je viens de replacer l'alerte "ici1" après l'accolade, soit juste avant "ici 2", et l'ordre d'affichage est le même (ça affiche d'abord 2, 4 puis 1, etc comme dans le message initial)

Envoyé par andry.aime

2- Que veux-tu faire? Je ne vois pas trop l'intérêt de vérifier la valeur de "element" à chaque étape comme ça sans que tu lui affectes une nouvelle valeur.

3- Tu peux aussi travailler en mode synchrone si c'est ton soucis.

2 - Pour l'instant je débute, et je veux vérifier l'ordre d'exécution de chaque fonction, d'où mes alertes.

3 - J'utilise onreadystatechange et je fais un test xhr.readyState == 4, donc je suis théoriquement en mode synchrone, non ?
Et pourtant au vu de l'affichage des balises "ici", ça reste asynchrone...
Ce qui m'embête, c'est que jamais le "ici 3" ne s'affiche...

Merci si vous avez d'autres idées

**andry.aime** · 04/08/2011, 12h49

Bonsoir,

J'utilise onreadystatechange et je fais un test xhr.readyState == 4, donc je suis théoriquement en mode synchrone, non ?

Non, tu travailles en toujours en mode asynchrone. Si tu veux travailler en mode synchrone

Code :

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

1
2
3
4
5
6
7
8
function ajaxtp(element)
 {
  getXhr();
  xhr.open("POST",'ajax/ajaxtp.php',false);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send("element="+element);
  document.getElementById(element).innerHTML = xhr.responseText;
  }

xhr est-il déclaré comme variable globale?

A+.

**Eric2a** · 04/08/2011, 13h03

Salut,

Envoyé par papa6

jamais le "ici 3" ne s'affiche...

Code :

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

if(xhr.readyState == 4 && xhr.status == 200)

Parce que dans ton cas, xhr.status est égale à 0 et non 200.

ici 2, element puis readyState valent 4, readyState vaut 0, status vaut 0

Tu testes en local ?

Ensuite pour le test, tu ne devrais pas utiliser alert() mais plutôt écrire le résultat dans une div par exemple.

**papa6** · 04/08/2011, 14h08

Merci à tous les 2

Ça fait autour d'un an que j'avais arrêté de m'intéresser à ajax à cause de l'asynchrone... Et là, c'est bon, vous m'avez débloqué (je n'osais pas poster, je croyais que c'était moi qui lisais mal les tutoriels)

Andry, merci pour ton code, j'y ai mis mes alertes (ok Éric 2A, je ferais des div, mais j'avais les alertes sous la main

), et elles se sont toutes affichées dans l'ordre.
Maintenant, je vais pouvoir travailler dessus.

À part ça, je ne sais plus si j'avais mis xhr comme variable globale (ces scritps remontent à un an...), mais je vais le garder à l'esprit.
Et sinon, je teste directement sur un serveur distant (je pense que c'est mieux avec des délais de réponse un peu plus longs).

Donc encore merci, et à bientôt

**Bovino** · 04/08/2011, 14h18

Ce qui m'embête, c'est que jamais le "ici 3" ne s'affiche...

C'est simplement dû au fait que le readyState 3 correspond à la phase de transmission des données, mais si tu as suffisamment peu de données à envoyer, elles le seront en un seul paquet, donc l'état "en cours de transmission" sera aussitôt remplacé par "tout a été envoyé" (readyState 4).