Discussion :

[Fidjy5]

Bonjour,

je cherche à réaliser une page contenant plusieurs div. comme chaque div contient un résultat assez lourd niveau requête j'essaye de faire pour chacun un script ajax.
Donc pour le moment j'ai 3scripts ajax que je lance au chargement de ma page. Le problème est que je n'ai qu'un seul script qui s'exécute. J'ai testé chaque AJAX au cas par cas, tout est ok mais pas quand je lance les 3 en 'même temps'.

fonction javascript

Code :

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

1
2
3
4
5
6
 
function chargement(){
		un();
		deux();
		trois();
	}

exemple ajax

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
 
function un(){
 
		creerRequete();
 
		var url = 'http://mapage.asp?aleat=' +Math.random()
		var imagecontent ='';
		var topcontent='';
 
		requete.open('GET', url, true);
		requete.onreadystatechange = function() {
			if(requete.readyState == 4) {
				if(requete.status == 200) {
					  var content=requete.responseText;
					  //alert(content);
					  document.getElementById('mondiv').innerHTML = content;
 
				}else{
						alert(requete.responseText);
				}
			}
		};
		requete.send(null);
     }

Comment puis-je faire pour que les 3 requetes se fasse de manière asynchrone de manière à ce que ma page soit fluide?

Merci d'avance

[Bovino]

Salut.

j'ai 3scripts ajax que je lance au chargement de ma page.

Ce serait pas plus efficace de générer directement le contenu sur le serveur
En général, une requête AJAX lancée au chargement de la page est assez maladroit et inutile...

Pour ce qui est de ton problème, vu la structure de ton code, il semble que requete soit une variable globale représentant un objet XMLHttpRequest. Du coup, vu que tu lances simultanément tes trois fonction, le requete de chaque est écrasé par celui de la suivante...
Il faut créer une nouvelle instance pour chaque fonction.
Enfin, les navigateurs limitent le nombre de requêtes simultanées (en général, c'est 3), donc il faut aussi faire attention à ça

[Fidjy5]

Oui voila. La définition de la variable requete est la suivante :

Code :

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

requete = new XMLHttpRequest();

Je ne comprend pas bien ce que tu entends par "générer directement sur le serveur.." Sinon ok pour la définition de plusieurs variables request. C'est sur cela que j'étais parti. Pour le nombre de requêtes simultanées oui j'avais lu un test dessus, pour IE et firefox c'est 2 simultanées me semble t'il, opéra pouvant en exécuter 4 à la fois.

[Bovino]

Code :

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

requete = new XMLHttpRequest();

signifie bien que tu crées une nouvelle instance de l'objet, mais comme tes 3 fonctions initialisent la même variable, chaque déclaration écrase la précédente, du coup, pour les 2 premiers appels, tu envoies une requête mais tu ne peux pas récupérer la réponse puisque l'objet a été détruit.

Pour ce qui est de générer directement sur le serveur, c'est juste qu'au lieu d'envoyer une requête au chargement de la page, autant récupérer les données directement au moment où tu construis ta page (dans un script PHP par exemple)

[O-Zone]

Pour le nombre de requêtes simultanées oui j'avais lu un test dessus, pour IE et firefox c'est 2 simultanées me semble t'il, opéra pouvant en exécuter 4 à la fois.

En fait, tu peux changer cette limite sur les navigateurs (dans le about:config de FF notamment) mais il y a une seconde limite coté serveur (heureusement ).

Pour ton problème Bovino a raison, essaie de mettre tout le code dans ta fonction creerRequete avec en parametre l'url ('http://mapage.asp?aleat=' +Math.random()) et la div de retour ('mondiv') et de déclarer la var requete uniquement dans cette fonction

[Mistic100]

merci à toi Bovino, tu as résolu mon casse-tête
personnellement j'ai une seule fonction JS mais elle est appelée trois fois simultanément
en ajoutant var devant la définition de mon objet ajax mes sorties ne se mélangent plus