L'utilisation de deux appels XMLHttpRequest sur une page

Question

J'ai deux divisions, <div id=statuslist></div><div id=customerlist></div>

La fonction sendReq() crée un XMLHttpRequest et récupère les données dans la division.

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL'); 

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL'); 

J'ai un problème,

Les données extraites dans le 'customerlist' est copié sur 'statuslist'

Si je change l'ordre des appels de fonction,

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL'); 

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL'); 

maintenant les données de 'statuslist' entre dans 'customerlist' ..

Quel est le problème avec le code?

Answer 1

Je l'ai eu avant.

Fondamentalement, vous avez un problème de portée - vous avez quelque chose comme ça dans votre fonction sendReq()?

if (window.ActiveXObject) 
{ 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
else if (window.XMLHttpRequest) 
{ 
xmlhttp = new XMLHttpRequest(); 
} 

Et quand vous faites une seconde demande, l'objet XMLHTTP est supplantée

Vous devez créer une fermeture où vos objets XMLHTTP ne se heurtent pas

par exemple

function sendReq(url, callbackFunction) 
{ 
    var xmlhttp 

    if (window.ActiveXObject) 
    { 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else if (window.XMLHttpRequest) 
    { 
    xmlhttp = new XMLHttpRequest(); 
    } 

    ... probably some other stuff here, setting url etc ... 

    xmlhttp.onreadystatechange = function() 
    { 
     if (xmlhttp.readyState==4&&xmlhttp.status='200') 
     { 
     if (callbackFunction) callbackFunction(xmlhttp.responseText); 
     } 
    } 

    .. probably more stuff here (including xmlhttp.send()) !! ... 

} 

Vous pouvez ensuite passer la fonction de rappel en tant que paramètre et lorsque les données sont chargées avec succès, elles seront transmises à la fonction de rappel. Notez que vous devrez passer la fonction réelle, pas seulement son nom (donc pas de guillemets autour du nom de la fonction)

Sinon, vous pouvez faire ce que je fais qui est juste utiliser jQuery - fonctionne pour la plupart de mes problèmes js;

Espérons que cela aide

Answer 2

C'est aussi mon problème en ce moment. Après une recherche approfondie, j'ai trouvé que:

Si vous avez plus d'une tâche AJAX sur votre site, vous devez créer une fonction standard pour créer l'objet XMLHttpRequest, et appeler cela pour chaque tâche AJAX - W3Schools.com

En outre, grâce à Two xmlHttpRequests in a single page qui me redirige vers cette question Using two xmlhttprequest calls on a page, j'ai pu résoudre le problème. Soit dit en passant, c'est une modification de Addsy's answer.

D'abord, créez une fonction standard ONE pour créer l'objet XMLHttpRequest et appelez ceci pour chaque tâche AJAX. Exemple:

function sendReq(url, callbackFunction) 
{ 
    var xmlhttp 

    if (window.ActiveXObject) 
    { 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else if (window.XMLHttpRequest) 
    { 
    xmlhttp = new XMLHttpRequest(); 
    } 

    xmlhttp.onreadystatechange = function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status=='200') 
     { 
      if (callbackFunction) callbackFunction(xmlhttp.responseText); 
     } 
    } 

    xmlhttp.open("GET",url,true); 
    xmlhttp.send(); 
} 

Deuxième, appelez la fonction et transmettre les paramètres nécessaires.Par exemple:

sendReq("orders_code_get.php?currentquery="+sql, function processResponse(response) 
{ 
    document.getElementById("orders_content").innerHTML=""; 
    document.getElementById("orders_content").innerHTML=response; 
}); 

J'ai testé et testé ce code et cela fonctionne.

Answer 3

En fait, il est possible d'exécuter plusieurs appels asynchrones xhr mais vous devez leur donner un identifiant unique en tant que paramètre pour pouvoir les stocker et les charger localement dans votre DOM. Par exemple, vous souhaitez effectuer une boucle sur un tableau et effectuer un appel ajax pour chaque objet. C'est un peu compliqué mais ce code fonctionne pour moi.

var xhrarray={}; 
for (var j=0; j<itemsvals.length; j++){ 
       var labelval=itemsvals[j]; 
       // call ajax list if present. 
       if(typeof labelval.mkdajaxlink != 'undefined'){ 
        var divlabelvalue = '<div id="' + labelval.mkdid + '_' +   item.mkdcck + '" class="mkditemvalue col-xs-12 ' + labelval.mkdclass + '"><div class="mkdlabel">' + labelval.mkdlabel + ' :</div><div id="'+ j +'_link_'+ labelval.mkdid +'" class="mkdvalue">'+labelval.mkdvalue+'</div></div>'; 
        mkdwrapper.find('#' + item.mkdcck + ' .mkdinstadivbody').append(divlabelvalue); 

        xhrarray['xhr_'+item.mkdcck] = new XMLHttpRequest(); 
        xhrarray['xhr_'+item.mkdcck].uniqueid=''+ j +'_link_'+ labelval.mkdid +''; 
        console.log(xhrarray['xhr_'+item.mkdcck].uniqueid); 
        xhrarray['xhr_'+item.mkdcck].open('POST', labelval.mkdajaxlink); 
        xhrarray['xhr_'+item.mkdcck].send(); 
        console.log('data sent'); 
        xhrarray['xhr_'+item.mkdcck].onreadystatechange=function() { 
         if (this.readyState == 4) { 
          console.log(''+this.uniqueid); 
          document.getElementById(''+this.uniqueid).innerHTML = this.responseText; 
         } 
        }; 
       } 
} 

Vous devez définir chaque objet XHR dans un objet variable globale et définir une valeur xhrarray['xhr_'+item.mkdcck].uniqueid pour obtenir son numéro d'identification unique et charger son résultat où vous voulez.

Espérons que cela vous aidera dans le futur.