Synchronicité AJAX PHP [Résolu]

[anoninc]

Bonjour,

Je débute en AJAX & Javascript.

J'appel une fonction onLoad de mon body.
A l'intérieur de cette fonction j'ai une boucle qui pour chaque valeur d'une variable effectue une requete XMLhttpRequest().

Le problème est le suivante :

Code :

1
2
3
4
5
xhr.open("GET",url,true);
xhr.send(null);
                            xhr.onreadystatechange = function() {
                                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                                             alert(xhr.responseText); }

Je boucle sur xhr.open et xhr.send mais je passe en fin de fonction à xhr.onreadystatechange qui donc m'alert la même réponse.

Comment attendre la réponse d'une requête une par une.

En sachant que ce n'est pas un appel de fonction avec un setInterval ou setTimeOut étant donné que je suis sur une boucle intra-fonction.

Merci d'avance.

[andry.aime]

Bonjour,

Utilise une fonction récursive en l'appelant quand le readyState est égal à 4 mais n'utilise pas une boucle.

A+.

[Bovino]

Surtout si

Je boucle sur xhr.open et xhr.send

Dans ce cas, tu utilises toujours le même objet xhr, je vois donc mal comment il pourrait avoir plusieurs propriétés responseText différentes.

[anoninc]

Envoyé par Bovino

Surtout si



Dans ce cas, tu utilises toujours le même objet xhr, je vois donc mal comment il pourrait avoir plusieurs propriétés responseText différentes.

Non mais je boucle >

Code :

1
2
3
var xhr=getXMLHttpRequest();
xhr.open("GET",url,true);
xhr.send(null);

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest();
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}

andry.aime pourrais tu m'en dire un peu plus?

Merci d'avance.
Je boucle n fois et après à la fin de ma boucle ca alert le dernier response n fois. (pour récapituler)

Merci d'avance.

[anoninc]

J'ai aussi tenté de rappeler de ma fonction javascript avec incrémentation de l'index.

Du style

Code :

1
2
3
4
 xhr.onreadystatechange = function() {
                                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
index++;
                                             fonction_js(index); }

sans succés.

[Bovino]

Envoyé par anoninc

Non mais je boucle >

Code :

Bah oui, c'est bien ce que je disais
Tu as une seule variable xhr à laquelle tu veux donner plusieurs valeurs différentes pour une propriété donnée...

Ceci dit, j'ai surtout l'impression que ton problème vient plus d'une erreur de conception...
Parce que d'une part, le nombre de requêtes simultanées est limité par le navigateur et d'autre part, faire une requête sur l'événement onload du document est déjà maladroit, mais en faire plusieurs est encore pire.

[anoninc]

Envoyé par Bovino

Bah oui, c'est bien ce que je disais
Tu as une seule variable xhr à laquelle tu veux donner plusieurs valeurs différentes pour une propriété donnée...

Ceci dit, j'ai surtout l'impression que ton problème vient plus d'une erreur de conception...
Parce que d'une part, le nombre de requêtes simultanées est limité par le navigateur et d'autre part, faire une requête sur l'événement onload du document est déjà maladroit, mais en faire plusieurs est encore pire.

mais la fonction getXMLHttpRequest() effectue un new xhr donc je ne comprend pas ..

Le fait de le faire sur du Onload est uniquement à but de test.

Je vous joint mon code si vous parvenez à comprendre.

Solution 1 : incrémentation d'index :

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
33
34
35
36
37
38
function link(index){
                this.index=index;
                console.log(index);
                db.transaction(function(tx) {
                    tx.executeSql("SELECT * FROM journal", [],
                    function(tx,resu){
                        var ligne=resu.rows;
                        if (typeof(index)=='undefined')
                        {
                            var index=0;
                        }
                        console.log(index);
                            var item = ligne.item(index);
                            console.log(item);
                            console.log(item.id);
                            console.log(item.modification);
                            var modification = item.modification;
                            var id = item.id;
                            var xhr=getXMLHttpRequest();
                            var url="sync.php?modification="+modification+"&id="+id;
                            xhr.open("GET",url,true);
                            xhr.send(null);
                            xhr.onreadystatechange = function() {
                                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                                        if (index<=ligne.length)
                                        {
                                        index=index+1;
                                        console.log(index);
                                        setTimeout("link(index)",5000);
                                        }
                                    }
                            };
                        },
                        function(tx,error){
 
                        });
                        });
                        }

Sans incrémentation :

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
                function link(){
                db.transaction(function(tx) {
                    tx.executeSql("SELECT * FROM journal", [],
                    function(tx,resu){
                        var ligne=resu.rows;
                        for (var index=0;index<ligne.length;index++){
                            var item = ligne.item(index);
                            console.log(item);
                            console.log(item.id);
                            console.log(item.modification);
                            var modification = item.modification;
                            var id = item.id;
                            var xhr=getXMLHttpRequest();
                            var url="sync.php?modification="+modification+"&id="+id;
                            xhr.open("GET",url,true);
                            xhr.send(null);
                            xhr.onreadystatechange = function() {
                                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                                             alert(xhr.responseText); // Données textuelles
                                             db.transaction(function(tx) {
                                                tx.executeSql(xhr.responseText,[],function(tx,resu){ alert('OK');},function(tx,error){alert(error); console.log(error);}); });   
                                    }
                            };
                            }
                        },
                        function(tx,error){
 
                        });
                        });
                        }

[Bovino]

mais la fonction getXMLHttpRequest() effectue un new xhr donc je ne comprend pas ..

Ben oui, mais chaque nouvel objet est affecté à la même variable !

[anoninc]

Envoyé par Bovino

Ben oui, mais chaque nouvel objet est affecté à la même variable !

écrasant l'ancien objet de cette variable, non?

Aurais tu une idée afin de me débloquer?

[andry.aime]

J'ai pas eu le temps de lire et de comprendre ton code en entier mais ce que je voulais dire c'est quelque chose comme ça:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function ajax(){
xhr=getXMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
  if(xhr.readuState==4){
      if(xhr.status==200 || xhr.status==0){
             alert(xhr.responseText);
      }else{
             alert("Erreur");
      }
      ajax();
  }
xhr.send(null);
}
}

A+.

[anoninc]

En effet andry.aime c'est ce que j'ai finis par déduire de moi même la veille.
Cela marche parfaitement.

Merci aussi à Bovino, pourrais tu; si tu vois ce post, répondre à ma dernière question tout de même.

> Résolu

[Bovino]

Envoyé par anoninc

écrasant l'ancien objet de cette variable, non?

Oui, et comme tes requêtes sont asynchrones, tu envoies une requête correspondant à certains paramètres, mais au retour, xhr.onreadystatechange s'applique au nouvel objet référencé par xhr.
Ce qui explique que

en fin de fonction à xhr.onreadystatechange qui donc m'alert la même réponse.

[anoninc]

Merci beaucoup Bovino je comprend donc parfaitement mon erreur.