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

[AJAX] Plusieurs fonctions dans un onclick

AJAX

Vue hybride

Discussions similaires

Partager

Partager