[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