[AJAX] Appel de plusieurs pages avec Ajax

Version imprimable

09/02/2006, 22h18
shadowbob

[AJAX] Appel de plusieurs pages avec Ajax

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
09/02/2006, 22h41
shwin

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

Ok mais je pensse que c'est asynchrome.

voila mon code

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

12/02/2006, 21h22
shadowbob

alors ce n'est pas possible ?
13/02/2006, 12h44
shadowbob

Alors personne n'as jamais fait ca ?
13/02/2006, 12h51
denisC

Citation:

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.
13/02/2006, 13h00
shadowbob

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...
13/02/2006, 13h28
titoumimi

il faut que tu crée deux instances de ton objet, ca devrait marcher mieux ;-)
13/02/2006, 13h44
shadowbob

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

essaye ça :

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

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

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

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:

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

13/02/2006, 16h48
Hervé Saladin

- 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 ... )
13/02/2006, 17h44
shadowbob

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 :cry:

Citation:

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:

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

13/02/2006, 18h26
shadowbob

Bon ben j'ai sauté unpeu trop vite ce passage du tutorial :oops:
"contruction.php" ben oui manque le S de construction !!
Merci pour m'avoir sortis de cette impasse :D

C'est bon maintenant ca marche...
Voila ce que c'est de chercher partout sauf à l'endroit ou ca bug :oops:
13/02/2006, 18h29
shadowbob

Bon les données semblais se mélanger à un moment mais j'ai mis un setTimeout de 1sec et ca marche trop bien :D
merci encors