[AJAX] Plusieurs fonctions dans un onclick

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

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, 13h14

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, 13h45

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

Et qui aura la meme function.

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

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, 04h34

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, 09h50

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

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

Oui je sais.

Mais je voudrais savoir laquelle est mieu niveau performance.

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

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, 17h57

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

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

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, 19h31

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, 14h20

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, 15h08

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, 15h28

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, 16h51

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, 20h05

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, 14h31

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.