[AJAX] Synchronicité AJAX PHP

Version imprimable

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.

07/02/2012, 09h34
andry.aime

Bonjour,

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

A+.
07/02/2012, 10h05
Bovino

Surtout si

Citation:

Je boucle sur xhr.open et xhr.send

:roll:

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.

Citation:

Envoyé par Bovino

Surtout si

:roll:

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.

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.

07/02/2012, 11h18
Bovino
Citation:
Envoyé par anoninc

Non mais je boucle >

Code:

1 2 3 var xhr=getXMLHttpRequest(); xhr.open("GET",url,true); xhr.send(null);
Bah oui, c'est bien ce que je disais :aie:
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... :koi:
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.

Citation:

Envoyé par Bovino

Bah oui, c'est bien ce que je disais :aie:
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... :koi:
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){
 
                        });
                        });
                        }

07/02/2012, 11h30
Bovino

Citation:

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 !
07/02/2012, 11h35
anoninc

Citation:

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?

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

08/02/2012, 09h44
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
08/02/2012, 09h54
Bovino

Citation:

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

Citation:

en fin de fonction à xhr.onreadystatechange qui donc m'alert la même réponse.
08/02/2012, 10h18
anoninc

Merci beaucoup Bovino je comprend donc parfaitement mon erreur. ;)