Instructions exécutées dans le désordre [Résolu]

[papa6]

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

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]

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]

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]

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 :

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]

Salut,

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.

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]

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]

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

[andry.aime]

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

[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);

[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 ), et merci pour votre aide !