Appel série à la même fonction AJAX renvoie uniquement les données du dernier appel

Question

J'ai trois éléments div, et je veux remplir chaque élément avec son propre contenu. J'appelle le même AJAX (très générique) fonctionne à chaque fois, d'envoyer le nom du div id comme paramètre:

//left-right rectangle content 
var rl = getContent("rightLeft"); 

//bottom content 
var br = getContent("bottomRectangle"); 

//top content 
var rtr = getContent("rightTopRectangle"); 

Si je fais une alerte (http.responseText) dans la fonction AJAX, je reçois le bon contenu html de la page distante. (En fait, si j'ajoute une alerte, il semble ralentir la fonction pour que mon contenu soit renvoyé correctement chaque fois que je l'appelle, mais qui veut des alertes sur leur page web?). Mais, sans les alertes, les appels ci-dessus traiteront correctement le dernier appel. Ainsi, dans la séquence d'appels ci-dessus, seule la dernière div, où id = "rightTopRectangle" sera remplie avec le html extrait de l'appel AJAX. Les deux appels précédents ne remplissent pas leurs divs avec le html AJAX récupéré. Si je bouscule l'ordre des appels, ce sera toujours le dernier appel AJAX qui fonctionne. J'ai l'impression que le problème a quelque chose à voir avec la partie asynchrone, où les appels précédents n'ont pas assez de temps pour traiter la demande avant que la fonction AJAX soit demandée encore et encore.

est ici la fonction AJAX:

function getContent(element){ 
    var url = "ajax/getcontent.php?cid="+element; //alert(url); 
    http.onreadystatechange=function(){ 
     if (http.readyState==4 && http.status==200){ //alert(http.responseText); 
      var response = http.responseXML.documentElement; 
      callback(element,http.responseText); 
     } 
    } 
    http.open("GET",url,true); 
    http.send();   
} 

La fonction nommée "callback" (il fonctionne très bien) ressemble à ceci:

function callback(e,c){ 
    document.getElementById(e).innerHTML = "<div style=\"line-height:"+ document.getElementById(e).offsetHeight +"px;margin:0px auto 0px auto;text-align:center;\" >" + unescape(c) + "</div>"; 
} 

MISE À JOUR: Cela fonctionne maintenant. J'ai ajouté une ligne à ma fonction getContent:

function getContent(element){ 
    var http = createRequestObject(); /*After Tej's answer, I took this line out 
    of the root of my script and placed it here, within the function, in order to 
    instantiate a new http object each time I call this function, so that they all 
    operate independently of one another*/ 
    var url = "ajax/getcontent.php?cid="+element; //alert(url); 
    http.onreadystatechange=function(){ 
     if (http.readyState==4 && http.status==200){ 
      var response = http.responseXML.documentElement; 
      callback(element,http.responseText); 
     } 
    } 
    http.open("GET",url,true); 
    http.send();   
} 

Answer 1

Vous réutilisant la même XmlHttpRequest pour toutes vos demandes ajax ; ceci conduit à la dernière demande toujours gagnante car les autres ont été écrasés. Vous devriez plutôt créer une nouvelle requête ajax pour chaque appel.

http = CreateAjaxRequest(); 
http.onreadystatechange = function() { ... } 
// etc 

Answer 2

vous devez passer element paramètre à votre fonction onreadystatechange, essayez ceci,

req.onreadystatechange = function (el) { 
    return function() { 
     if (http.readyState==4 && http.status==200){ //alert(http.responseText); 
      var response = http.responseXML.documentElement; 
      callback(el,http.responseText); 
     } 
    }; 
}(element);