[AJAX] multiple requete XMLHttpRequest

**totoAussi** · 16/11/2009, 15h03

Bonjour, j'ai un problème, mais je vais d'abord vous décrire ce que je voudrais faire :

J'ai 3 div que voici :

Code :

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

1
2
3
<div id='idDiv0'></div>
<div id='idDiv1'></div>
<div id='idDiv2'></div>

Puis par une fonction javascript (que j'ai nommé afficherFichier()

, je voudrais afficher des données d'un fichier externe (ce fichier externe s'appelle fichier.php) par Ajax dans les 3 div en méme temps, mais je n'arrive pas à le faire.

Voici le code complet avec la fonction en question :

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
<html>
<head>
</head>
<body>
 
<div id='idDiv0'></div>
<div id='idDiv1'></div>
<div id='idDiv2'></div>
 
<script language='javascript'>
 
function afficherFichier()  //On créer la fonction afficherFichier()
{   
    /*On met les div sous forme d'objet, et comme il y a 3 div, alors on crée 3 objets de div au moyen d'une boucle for:*/
    for(n=0;n<=2;n++)
    {   
        objDiv=new Array(); 
        objDiv[n]=document.getElementById("idDiv"+n);
 
        /*Une fois qu'on a mis les div en objet, on va faire appel à un fichier externe nommé fichier.php par ajax, puis on va afficher les données de ce fichier externe dans chacun des 3 div au moyen de innerHTML:*/
        /*Et comme il y a 3 div, alors il y aura 3 appels (ou requete XMLHttpRequest) simmultanés du fichier externe, donc on crée 3 objets XMLHttpRequest grace à un Array:*/
        objXMLHttpRequest=new Array();
        objXMLHttpRequest[n]=new XMLHttpRequest();
        objXMLHttpRequest[n].onreadystatechange=function()
        {   
           if(objXMLHttpRequest[n].readyState==4 && objXMLHttpRequest[n].status==200)
           {   
               /*On récupère les données du fichiers externe appelé:*/
               donnees=new Array();
               donnees[n]=objXMLHttpRequest[n].responseText;  
               /*alert(donnees[n]);*/
 
               /*Enfin on affiche les données de ce fichier externe dans les 3 div simultanément par innerHTML:*/
               objMatrice[n].innerHTML=donnees[n];             
           }
        }
 
        objXMLHttpRequest[n].open('GET',fichier.php,true);
        objXMLHttpRequest[n].send(null);  
 
    }
 
}
 
afficherFichier();   //Maintenant on exécute la fonction afficherFichier();
 
</script>
 
</body>
</html>

Mais ça ne marche pas, est-ce qu'un sait comment il faut faire ?

PS : je pense que le problème vient au niveau de

Code :

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

1
2
3
4
objXMLHttpRequest[n].onreadystatechange=function()
{  
    ....
}

car si on met une alert(n); entre ses 2 accolades pour suivre la valeur de n,
et bien je n'ai qu"une seule alerte, et en plus cette alerte m'affiche 3,
alors que j'aurais du avoir 3 alertes successives dont la 1ère alerte devrait m'afficher 0,
la seconde alerte devrait m'afficher 1, et la 3ème et dernière alerte devrait m'afficher 2,
car le n dans la boucle for de la fonction afficherFichier() va de 0 à 2.

Merci d'avance pour votre aide, bien à vous.

**E.Bzz** · 16/11/2009, 16h18

Bonjour,

Envoyé par totoAussi

je voudrais afficher des données d'un fichier externe (ce fichier externe s'appelle fichier.php) par Ajax dans les 3 div en méme temps

s'agissant du même fichier, je ne comprends pas pourquoi tu fais 3 appels Ajax ?

Tu n'as qu'à récupérer ton fichier puis

Code :

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

1
2
3
document.getElementById("idDiv0").innerHTML = objXhr.responseText;
document.getElementById("idDiv1").innerHTML = objXhr.responseText;
document.getElementById("idDiv2").innerHTML = objXhr.responseText;