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

Version imprimable

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:

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

Code:

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

04/08/2011, 07h50
andry.aime

Bonjour,

1-

Citation:

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+.
04/08/2011, 12h43
papa6

Merci Andry,

Citation:

Envoyé par andry.aime

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

C'est bizarre que ça marche :?

Ah oui 8O 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)

Citation:

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

Bonsoir,

Citation:

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:

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

04/08/2011, 13h03
Eric2a

Salut,

Citation:

Envoyé par papa6

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

Code:

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

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

Citation:

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.
04/08/2011, 14h08
papa6

Merci à tous les 2 :ccool:

Ç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 :D
04/08/2011, 14h18
Bovino

Citation:

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).
04/08/2011, 14h24
andry.aime

Citation:

Envoyé par papa6

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

Tu peux tester en local, en mettant un sleep dans le fichier appelé.

A+.
04/08/2011, 17h12
papa6

Vraiment tout va bien maintenant, le problème est résolu. Là je suis en train de paufiner :)

Mon erreur provenait du fait que j'étais en asynchrone alors que je m'attendais à du synchrone (c'était mon problème d'il y a un an, avec un script pour Google Maps).

La solution est celle d'andry.aime :
true = asynchrone, et false = synchrone

Code:

xhr.open("POST",'monfichier.php',false);
05/08/2011, 18h22
papa6

Bien content d'arriver à une mini-page, j'en profite pour la citer :
http://tirezpas.com

C'est une page "bête", il faut cliquer sur des noms de personnes qu'on n'aime pas trop pour faire monter leur score.

Au niveau programmation, si certains sont intéressés, je peux publier le code.

En tout cas, je suis bien content d'y être arrivé (autosatisfaction :aie:), et merci pour votre aide !