[AJAX] Plusieurs fonctions dans un onclick

Version imprimable

Bonjours,

Je sais que des posts a ce sujet existe deja mais ne m'ont en aucun cas aider.

Alors j'untilise AJAX comme si dessus :

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
54
55
56
57
58
59
60
61
 
// JavaScript Document
var xhr = null; 
var xhr2 = null;
var xhr3 = null;
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..."); 
  xhr = false; 
  } 
}
 
function getXhr2()
{
     if(window.XMLHttpRequest)xhr2 = new XMLHttpRequest(); 
else if(window.ActiveXObject) { 
  try { xhr2 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e)  {
     xhr2 = new ActiveXObject("Microsoft.XMLHTTP"); }
  } else {xhr2 = false;} 
}
 
function getXhr3() {
     if(window.XMLHttpRequest)xhr3 = new XMLHttpRequest(); 
else if(window.ActiveXObject) { 
  try { xhr3 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e)  {
     xhr3 = new ActiveXObject("Microsoft.XMLHTTP"); }
  } else {xhr3 = false;} 
}
 
function itemDetail(id) {
	getXhr();
	getXhr2();
	getXhr3();
	xhr.onreadystatechange = function() {
		 if(xhr.readyState == 4) if (xhr.status == 200) {
			 document.getElementById('detail').innerHTML=xhr.responseText;
			 document.getElementById('mixing').innerHTML=xhr2.responseText;
			 document.getElementById('drop').innerHTML=xhr3.responseText;
		 }
							}
			xhr.open("GET","view/detail.php?id="+id,true);
			xhr2.open("GET","view/mixing.php?id="+id,true);
			xhr3.open("GET","view/drop.php?id="+id,true);
 
 
	xhr.send(null);
	xhr2.send(null);
	xhr3.send(null);
	}

Comment faire autrement parcque quand la demande est trop grande sa plante !

Ben, tu ne peux pas gérer 3 appels AJAX en parallèle :roll:
Par exemple, quand tu fais
Code:

1 2 3 4 5 if(xhr.readyState == 4) if (xhr.status == 200) { document.getElementById('detail').innerHTML=xhr.responseText; document.getElementById('mixing').innerHTML=xhr2.responseText; document.getElementById('drop').innerHTML=xhr3.responseText; }
qu'est-ce qui te garantit que tu auras reçu toutes les réponses à ce moment ???

21/03/2011, 12h45
thebarbarius

Comment faudrai s'y prendre pour transformer mon code en 1 function getxhr().

Et qui aura la meme function.

Salut,

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<script type="text/javascript">//<![CDATA[
 
			var itemDetail=function(){
				var filename =['detail.php','mixing.php','drop.php'];
				var container=['detail','mixing','drop'];
				var current  =0;
 
				var xhr=(function(){
					var e;
					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...");
						xhr=false;
					}
					return xhr;
				})();
 
				return{
					init:function(id){
						if(!xhr)return false;
						xhr.open('GET','view/'+filename[current]+'?id='+id,true);
						xhr.onreadystatechange=function(){
							if(xhr.readyState==4){
								if(xhr.status==200){
									document.getElementById(container[current]).innerHTML=xhr.responseText;
								}else
									alert('Erreur lors de la requête au fichier '+filename[current]);
 
								current++;
								if(current<filename.length)itemDetail.init(id);
							}
						};
						xhr.send(null);
						return true;
					}
				}
			}();
 
			window.onload=function(){itemDetail.init(123);};
		//]]>
		</script>
	</head>
 
	<body>
		<h1>Test</h1>
 
		<h2>Detail</h2>
		<div id="detail"></div>
 
		<h2>Mixing</h2>
		<div id="mixing"></div>
 
		<h2>Drop</h2>
		<div id="drop"></div>
	</body>
</html>

Chaque requête est effectuée une fois la précédente terminée.

Ok merci, alors de mon coté j'ai fais sa et j'ai par la meme occasion divisé par 7 le temps de chargement de la requete.

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
// JavaScript Document
var xhr = null; 
var xhr2 = null;
var xhr3 = null;
var xhr4 = null;
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..."); 
  xhr = false; 
  } 
}
 
function getXhr2()
{
     if(window.XMLHttpRequest)xhr2 = new XMLHttpRequest(); 
else if(window.ActiveXObject) { 
  try { xhr2 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e)  {
     xhr2 = new ActiveXObject("Microsoft.XMLHTTP"); }
  } else {xhr2 = false;} 
}
 
function getXhr3() {
     if(window.XMLHttpRequest)xhr3 = new XMLHttpRequest(); 
else if(window.ActiveXObject) { 
  try { xhr3 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e)  {
     xhr3 = new ActiveXObject("Microsoft.XMLHTTP"); }
  } else {xhr3 = false;} 
}
 
 
function getXhr4() {
     if(window.XMLHttpRequest)xhr4 = new XMLHttpRequest(); 
else if(window.ActiveXObject) { 
  try { xhr4 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e)  {
     xhr4 = new ActiveXObject("Microsoft.XMLHTTP"); }
  } else {xhr4 = false;} 
}
 
function itemDetail(id) {
	getXhr(); getXhr2(); getXhr3(); getXhr4();
 
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
				document.getElementById('1').innerHTML=xhr.responseText;
		}
	}
	xhr.open("GET","view/1.php?id="+id,true);
	xhr.send(null);
 
	xhr2.onreadystatechange = function() {
		if(xhr2.readyState == 4 && xhr2.status == 200) { 
				document.getElementById('2').innerHTML=xhr2.responseText;
		}
	}
	xhr2.open("GET","view/2.php?id="+id,true);
	xhr2.send(null);
 
	xhr3.onreadystatechange = function() {
		if(xhr3.readyState == 4 && xhr3.status == 200) { 
				document.getElementById('3').innerHTML=xhr3.responseText;
		}
	}
	xhr3.open("GET","view/3.php?id="+id,true);
	xhr3.send(null);
}

Quelle methode et la mieux ?

22/03/2011, 08h50
nadox

Bonjour,
Tu as divisé ta requête en quatres requête plutôt...
22/03/2011, 14h12
thebarbarius

Oui je sais.

Mais je voudrais savoir laquelle est mieu niveau performance.
22/03/2011, 15h21
nadox

Petit parallèle :

Tu as 4 personnes qui veulent aller d'un point A à un point B.

Quelles est la solution la plus performante ?
1 - Utiliser 1 voiture pour les 4 personnes ?
2 - Utiliser 1 voiture par personne ?

A ton avis ? :lol:
22/03/2011, 16h57
thebarbarius

Je pense pas que sa se passe comme sa pour ce cas.
22/03/2011, 17h23
Eric2a

Personnellement je pense que l'envoi des requêtes en cascade est préférable.
Il y a moins de sollicitation côté serveur/client en même temps.

Mais ce n'est que mon avis.

PS: 4 personnes désirent franchir une porte.

Quelles est la solution la plus adaptée ?
1 - :zoubi: Une personne à la fois avec respect et bonne humeur (les femmes et les enfants d'abord)
2 - :aie: Filer des torniolles pour passer le premier
22/03/2011, 18h31
nadox

Je souhaitais simplement souligner le fait qu'un seul objet XHR est nécessaire pour effectuer les requêtes... et que cela n'avait aucun impact sur les performances des requêtes.
Mon petit parallèle n'attendait aucune réponse, il illustrait simplement le non-sens de la question.
Quelles sont les différentes méthodes ? Les deux codes utilisent tout deux plusieurs requêtes ! Par contre, l'un utilise plusieurs objets XHR(voitures), pas l'autre !
Je suis bien entendu d'accord sur le fait qu'il est préférable d'utiliser des requêtes multiples lorsque c'est possible !

Ce code ne marche pas :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<script type="text/javascript">//<![CDATA[
 
			var itemDetail=function(){
				var filename =['detail.php','mixing.php','drop.php'];
				var container=['detail','mixing','drop'];
				var current  =0;
 
				var xhr=(function(){
					var e;
					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...");
						xhr=false;
					}
					return xhr;
				})();
 
				return{
					init:function(id){
						if(!xhr)return false;
						xhr.open('GET','view/'+filename[current]+'?id='+id,true);
						xhr.onreadystatechange=function(){
							if(xhr.readyState==4){
								if(xhr.status==200){
									document.getElementById(container[current]).innerHTML=xhr.responseText;
								}else
									alert('Erreur lors de la requête au fichier '+filename[current]);
 
								current++;
								if(current<filename.length)itemDetail.init(id);
							}
						};
						xhr.send(null);
						return true;
					}
				}
			}();
 
			window.onload=function(){itemDetail.init(123);};
		//]]>
		</script>
	</head>
 
	<body>
		<h1>Test</h1>
 
		<h2>Detail</h2>
		<div id="detail"></div>
 
		<h2>Mixing</h2>
		<div id="mixing"></div>
 
		<h2>Drop</h2>
		<div id="drop"></div>
	</body>
</html>

03/04/2011, 14h08
nadox

Si tu nous détaille ce qui ne "marche" pas, on pourra peut-être t'aider, non ?
Parce là, le code à l'air bon.
Il charge les données "détails", "mixing" et "drop" pour un élément dont l'id est "123"... c'est pas ce que tu veux ?
03/04/2011, 14h28
Eric2a

Et en changeant la ligne

Code:

if(xhr.status==200){

par

Code:

if(xhr.status===200||xhr.status===0){

Ou alors les données ne s'actualisent pas ?

Dans ce cas, on peux ajouter un paramètre (GET) contenant une valeur differente à chaque requête...

Remplacer

Code:

xhr.open('GET','view/'+filename[current]+'?id='+id,true);

par

Code:

xhr.open('GET','view/'+filename[current]+'?id='+id+'?time='+Math.random(),true);
03/04/2011, 15h51
thebarbarius

Alors pour la premiere solution inutile :

Ensuite j'ai changé par ce que tu as dit mais rien n'y fait.

Je regarde avec firebug, et en faite il s'avere que aucune page n'est appelé !

Donc evident que cela ne marche pas.

Je pense qu'une erreur plus grosse traine dans ce code.
03/04/2011, 19h05
nadox

Citation:

Envoyé par thebarbarius

Je pense qu'une erreur plus grosse traine dans ce code.

Pas plutôt autour de ce code ?:roll:

Je n'ai eu aucune difficulté à le tester seul...
Mis à part la première solution proposée puisque je faisait un test sur une page htm simple (le status 0).

Par contre : est-ce qu'il n'y aurait pas autre chose sur le onload de window ?
04/04/2011, 13h31
thebarbarius

Après x test et essaie.

Je ne parviens pas a faire marcher ton code.
Aucune donnée n'est envoyé et par consequent mes div ne s'actualise pas.

J'abandonne.
04/04/2011, 13h49
Eric2a

Re,

:calim2: C'est bizarre car je l'ai testé avant de le poster ici.

Citation:

Envoyé par nadox

est-ce qu'il n'y aurait pas autre chose sur le onload de window ?