[AJAX] Plusieurs fonctions dans un onclick

**thebarbarius** · 21/03/2011, 11h12

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 :

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
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 !

**Bovino** · 21/03/2011, 12h14

Ben, tu ne peux pas gérer 3 appels AJAX en parallèle

Par exemple, quand tu fais

Code :

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

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 ???

**thebarbarius** · 21/03/2011, 12h45

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

Et qui aura la meme function.

**Eric2a** · 21/03/2011, 13h44

Salut,

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

**thebarbarius** · 22/03/2011, 03h34

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 :

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
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 ?

**nadox** · 22/03/2011, 08h50

Bonjour,
Tu as divisé ta requête en quatres requête plutôt...

**thebarbarius** · 22/03/2011, 14h12

Oui je sais.

Mais je voudrais savoir laquelle est mieu niveau performance.

**nadox** · 22/03/2011, 15h21

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 ?

**thebarbarius** · 22/03/2011, 16h57

Je pense pas que sa se passe comme sa pour ce cas.

**Eric2a** · 22/03/2011, 17h23

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 -

Une personne à la fois avec respect et bonne humeur (les femmes et les enfants d'abord)
2 -

Filer des torniolles pour passer le premier

**nadox** · 22/03/2011, 18h31

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 !

**thebarbarius** · 03/04/2011, 13h20

Ce code ne marche pas :

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

**nadox** · 03/04/2011, 14h08

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 ?

**Eric2a** · 03/04/2011, 14h28

Et en changeant la ligne

Code :

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

if(xhr.status==200){

par

Code :

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

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 :

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

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

par

Code :

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

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

**thebarbarius** · 03/04/2011, 15h51

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.

**nadox** · 03/04/2011, 19h05

Envoyé par thebarbarius

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

Pas plutôt autour de ce code ?

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 ?

**thebarbarius** · 04/04/2011, 13h31

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.