[AJAX] Appel de plusieurs pages avec Ajax

**shadowbob** · 09/02/2006, 22h18

J'ai un petit soucis...
J'ai 2 div qui j'aimerai bien charger une function Ajax séparé sur chaqun des 2 car l'un est ma page principal qui changera tout le temps et l'autre il change uniquement quand il est nécessaire...
Mais je n'arrive pas à charger les 2 car le 1er le xhr.status est à 200 mais l'autre est bien au dela (c'est normal je pensse) mais j'aimerai savoir si c'est possible de faire ca ?

Merci

**shwin** · 09/02/2006, 22h41

Tu peux le faire.

Ce qui faut faire attention

Si tu le fait asynchrome
-Avoir plusieur instance de ton xhr
-Faire attention que le serveur ne met pas en cache ta page appeler. Si il met en cache, mettre un timestamp dans le url pour que chaque appel soit différent.

Non asynchrome
-Tu enleve tout l'utilité d'un ajax

-Back to asynchrome

montre ton code, on va pouvoir t'aidé a débugger alors que sans code c'est assez difficile

A+ et bonne continuation

**shadowbob** · 09/02/2006, 22h58

Ok mais je pensse que c'est asynchrome.

voila mon code

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
function body(){
  compteArebours();
  dirige('accueil', '', 'Le jeu');
  construction();
}
 
function getXhr(){
  if(window.XMLHttpRequest)
	xhr = new XMLHttpRequest(); 
	  else if(window.ActiveXObject){
	    try {
		  xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		  xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	  }
  else {
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Merci de mettre à jour Firefox, Opera ou eventuelement Internet Explorer"); 
	xhr = false; 
  } 
}
 
function dirige(lapage, option, titre){
 
  document.getElementById('titre').innerHTML = titre;
 
  getXhr()
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      document.getElementById('jeu').innerHTML = xhr.responseText; 
    }
  }
 
  xhr.open("GET",lapage+".php?"+option,true);
  xhr.send(null);
 
}
 
function construction(){
 
  getXhr()
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      document.getElementById('construction').innerHTML = xhr.responseText;
 
    }
  }
 
  xhr.open("GET", "contruction.php",true);
  xhr.send(null);
 
}

ma function body() appel sur le body les 2 function construction() et dirige()

**shadowbob** · 12/02/2006, 21h22

alors ce n'est pas possible ?

**shadowbob** · 13/02/2006, 12h44

Alors personne n'as jamais fait ca ?

**denisC** · 13/02/2006, 12h51

Envoyé par shadowbob

Alors personne n'as jamais fait ca ?

Si. Visiblement, tu ne comprends pas l'asynchrone. Reflechis à la succession des evenements ayant lieu, et tu te rendras compte que tu cherches à faire faire 2 choses en même temps à ton pauvre objet XHR.

Il y a un problème conceptuel dans ton code.

**shadowbob** · 13/02/2006, 13h00

oui je m'en suis rendu compte mais j'arrive pas à trouver la sollution pour que ca marche...
Au faite je doit faire 1 objet asynchrone et l'autre synchrone ?
car la 2nd partie je m'en fiche qu'elle soit plus lente à charger s'est une page secondaire...

**titoumimi** · 13/02/2006, 13h28

il faut que tu crée deux instances de ton objet, ca devrait marcher mieux ;-)

**shadowbob** · 13/02/2006, 13h44

ben ca faudrai m'expliquer je suis quand même un débutant en AJAX

**Hervé Saladin** · 13/02/2006, 13h56

essaye ça :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function body(){
  compteArebours();
  dirige('accueil', '', 'Le jeu');
  construction();
}
 
function getXhr(){
  if(window.XMLHttpRequest)
   xhr = new XMLHttpRequest();
     else if(window.ActiveXObject){
       try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
     }
  else {
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Merci de mettre à jour Firefox, Opera ou eventuelement Internet Explorer");
   xhr = false;
  }
  return xhr;
}
 
function dirige(lapage, option, titre){
 
  document.getElementById('titre').innerHTML = titre;
 
  var xhr_1=getXhr()
  xhr_1.onreadystatechange = function(){
    if(xhr_1.readyState == 4 && xhr_1.status == 200){
      document.getElementById('jeu').innerHTML = xhr_1.responseText;
    }
  }
 
  xhr_1.open("GET",lapage+".php?"+option,true);
  xhr_1.send(null);
 
}
 
function construction(){
 
  var xhr_2=getXhr()
  xhr_2.onreadystatechange = function(){
    if(xhr_2.readyState == 4 && xhr_2.status == 200){
      document.getElementById('construction').innerHTML = xhr_2.responseText;
 
    }
  }
 
  xhr_2.open("GET", "contruction.php",true);
  xhr_2.send(null);
 
}

**denisC** · 13/02/2006, 14h07

Ou alors, en utilisant un seul objet (en reprenant ton code initial):

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
function body(){
  compteArebours();
  dirige('accueil', '', 'Le jeu');
}
 
function getXhr(){
  if(window.XMLHttpRequest)
	xhr = new XMLHttpRequest(); 
	  else if(window.ActiveXObject){
	    try {
		  xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		  xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	  }
  else {
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Merci de mettre à jour Firefox, Opera ou eventuelement Internet Explorer"); 
	xhr = false; 
  } 
}
 
function dirige(lapage, option, titre){
 
  document.getElementById('titre').innerHTML = titre;
 
  getXhr()
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      document.getElementById('jeu').innerHTML = xhr.responseText; 
      construction();
    }
  }
 
  xhr.open("GET",lapage+".php?"+option,true);
  xhr.send(null);
 
}
 
function construction(){
 
  getXhr()
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      document.getElementById('construction').innerHTML = xhr.responseText;
 
    }
  }
 
  xhr.open("GET", "contruction.php",true);
  xhr.send(null);
 
}

**shadowbob** · 13/02/2006, 14h35

denisC > j'avais déja testé ca et ca ne marchais pas en plus c'est pas trop ce que je désire faire car je veut que chaqun s'éxecute indépendament sans charger l'autre page si l'on désire pas...

Hervé Saladin > j'ai testé mais ca n'as pas l'aire de fonctionner j'ai l'erreur suivant :
undefinied à la valeur null ou n'est pas un objet.
ce qui m'aide pas vraiment...
J'ai testé d'executer qu'un seul code et ca ne lance pas.

Donc voici mon code avec ta méthode :

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
 
function dirige(lapage, titre){
 
  document.getElementById('titre').innerHTML = titre;
 
  var xhr_1 = getXhr();
  // On défini ce qu'on va faire quand on aura la réponse
  xhr_1.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr_1.readyState == 4 && xhr_1.status == 200){
      document.getElementById('jeu').innerHTML = xhr_1.responseText; 
    }       
  }
 
  xhr_1.open('GET',lapage,true);
  xhr_1.send(null);
 
}

Merci

**Hervé Saladin** · 13/02/2006, 16h48

- Quelle est la ligne qui bug ? (regarde par rapport au numéro de la ligne dans le code html qui est renvoyé à ton navigateur, pas dans le code source)

- tu as bien pensé à rajouter la ligne : "return xhr;" dans la fonction getXhr() ? (c'est le 'petit detail' qui fait toute la différence ... )

**shadowbob** · 13/02/2006, 17h44

c'est bien le return que j'avais zapé (désolé je ne l'avais pas vu)
par contre c'est exactement pareil qu'avant

**Hervé Saladin** · 13/02/2006, 17h57

le 1er le xhr.status est à 200 mais l'autre est bien au dela (c'est normal je pensse)

==> non ca n'est pas normal, le code 200 correspond à une réponse du type "ok" du serveur http, ce qui veut dire que tout a bien marché
Quel est le code que tu reçoit ? (si tu ne sais pas, affiche le à l'aide d'un alert() comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
xhr_2.onreadystatechange = function()
{
    if(xhr_2.readyState == 4 && xhr_2.status == 200)
    {
      document.getElementById('construction').innerHTML = xhr_2.responseText;     
    }
    else
    {
          alert(xhr_2.status);
     }
  }

pour info, les codes de réponses hhtp (autres que 200) les plus courants sont :
- 404 (not found), ce qui signifie que la page demandée n'existe pas
- 403 (Access denied), ce qui signifie que tu n'a pas les droits pour demander cette page, par exemple a cause d'un htaccess ou quelque chose de ce genre
- 400 (Bad Request), ce qui signifie que tu as envoyé une requete invalide au serveur

Tu trouvera tous les codes ici : http://libraries.ucsd.edu/about/tool...nse-codes.html