Due asincrone AJAX chiamate rendimenti stesso risultato

Question

Ho due ajax chiamate e sto chiamando li async:

xmlhttpPostInstagram2('firsturl'); 
xmlhttpPostInstagram3('secondurl'); 

Il problema è che sto ottenendo gli stessi risultati di entrambe le chiamate. Se cambio async da sincronizzare, sto ottenendo due risultati diversi, che è quello previsto. Qualcuno può decidere cosa sta incasinando la chiamata ajax async?

Non voglio usare jquery. La risposta javascript sarebbe apprezzata.

function xmlhttpPostInstagram2(strURL) { 
    var originalValue = "" 
    var xmlHttpReq = false; 

    var self = this; 
    // Mozilla/Safari 
    if (window.XMLHttpRequest) { 
    self.xmlHttpReq = new XMLHttpRequest(); 
    } 
    // IE 
    else if (window.ActiveXObject) { 
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    self.xmlHttpReq.open('POST', strURL, true); 
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    self.xmlHttpReq.onreadystatechange = function() { 
    if (self.xmlHttpReq.readyState == 4) { 

     var temp2 = document.getElementById('sidebartag'); 
     temp2.innerHTML = self.xmlHttpReq.responseText; // child is the fetched string from ajax call in your case 
    } 

    } 
    self.xmlHttpReq.send(); 
} 

e

function xmlhttpPostInstagram3(strURL) { 
    var originalValue = "" 
    var xmlHttpReq = false; 

    var self = this; 
    // Mozilla/Safari 
    if (window.XMLHttpRequest) { 
    self.xmlHttpReq = new XMLHttpRequest(); 
    } 
    // IE 
    else if (window.ActiveXObject) { 
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    self.xmlHttpReq.open('POST', strURL, true); 
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    self.xmlHttpReq.onreadystatechange = function() { 
    if (self.xmlHttpReq.readyState == 4) { 

     var temp2 = document.getElementById('sidebartag1'); 
     temp2.innerHTML = self.xmlHttpReq.responseText; // child is the fetched string from ajax call in your case 
    } 

    } 
    self.xmlHttpReq.send(); 
} 

Answer 1

Spiegazione senza l'utilizzo di jQuery.

Nel tuo caso:

si sta chiamando contemporaneamente a queste funzioni: xmlhttpPostInstagram2('firsturl');xmlhttpPostInstagram3('secondurl'); Quando si esegue la prima funzione xmlhttpPostInstagram2, si inizializza l'oggetto XMLHttpRequest e contemporaneamente, nella seconda funzione xmlhttpPostInstagram3 si sovrascrive l'oggetto XMLHttpRequest perché la prima richiesta non è stata completata.

Si potrebbe provare a dichiarare in modo indipendente un'istanza di XMLHttpRequest in ciascuna funzione. Qualcosa di simile a questo:

function xmlhttpPostInstagram2(strURL) { 
    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP"); 
    xhr.open("POST", strURL, true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      var temp2 = document.getElementById("sidebartag"); 
      obj = JSON.parse(xhr.responseText); 
      temp2.innerHTML = obj.name; 
     } 
    }; 
    xhr.send(); 
} 

E:

function xmlhttpPostInstagram3(strURL) { 
    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP"); 
    xhr.open("POST", strURL, true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      var temp2 = document.getElementById("sidebartag1"); 
      obj = JSON.parse(xhr.responseText); 
      temp2.innerHTML = obj.name; 
     } 
    }; 
    xhr.send(); 
} 

Quindi, è possibile eseguire queste funzioni contemporaneamente correttamente:

xmlhttpPostInstagram2("http://api.openweathermap.org/data/2.5/weather?q=London"); 
xmlhttpPostInstagram3("http://api.openweathermap.org/data/2.5/weather?q=UK"); 

Live demo

Answer 2

Credo che il problema è correlato al campo di applicazione. Hai la linea:

var self = this; 

Nell'ambito della funzione (da quello che posso dire dal codice che hai fornito), this si riferisce alla window. Pertanto self equivale a window. Per verificare aggiungere un console.log(self) dopo l'istruzione di autodichiarazione e controllare il risultato negli strumenti dev del browser.

var self = this; 
console.log(self); // Logs Window object to console. 

Viene quindi esegue la seguente dichiarazione:

self.xmlHttpReq = new ... 

Quando si sta facendo questo, il riferimento alla variabile di xmlHttpReq fa riferimento alla stessa variabile in entrambe le funzioni (cioè window.xmlHttpReq). Questa variabile viene sovrascritta quando si effettua la seconda chiamata di funzione, il che spiegherebbe il motivo per cui sembrerebbe che si ottenga lo stesso risultato da entrambe le chiamate di funzione.

Per risolvere questo problema è possibile dichiarare xmlHttp come variabile locale nell'ambito di applicazione della funzione:

function xmlhttpPostInstagram2(){ 
    var xmlHttpReq; 

    // Mozilla/Safari 
    if (window.XMLHttpRequest) { 
    xmlHttpReq = new XMLHttpRequest(); 
    } 
    // IE 
    else if (window.ActiveXObject) { 
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    //etc... 
}