Dwa asynchroniczny AJAX wzywa powraca sam wynik

Question

Mam dwa ajax połączeń i wzywam ich async:

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

Problemem jest to, że otrzymuję takie same wyniki z obu połączeń. Jeśli zmienię async na synchronizację, otrzymuję dwa różne wyniki, które są oczekiwane. Czy którykolwiek punkt, który psuje połączenie ajax async?

Nie chcę używać jquery. javascript odpowiedź byłaby doceniona.

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(); 
} 

i

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

Wyjaśnienie bez użycia jQuery.

W twoim przypadku:

Dzwonisz jednocześnie do tych funkcji: xmlhttpPostInstagram2('firsturl');xmlhttpPostInstagram3('secondurl'); Po uruchomieniu pierwszej funkcji xmlhttpPostInstagram2, zainicjować obiekt XMLHttpRequest i jednocześnie w drugiej funkcji xmlhttpPostInstagram3 nadpisanie obiektu XMLHttpRequest ponieważ pierwsze żądanie nie zostało ukończone.

Można spróbować deklarując niezależnie wystąpienie XMLHttpRequest w każdej funkcji. Coś takiego:

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(); 
} 

I:

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(); 
} 

Następnie można uruchomić te funkcje jednocześnie odpowiednio:

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

Myślę, że problem jest związany z zakresu. Masz linię:

var self = this; 

w zakresie funkcji (z tego co mogę powiedzieć z kodu podałeś) this odnosi się do window. Dlatego self jest równy window. Aby to sprawdzić, dodaj console.log(self) po deklaracji własnej deklaracji i sprawdź wynik w narzędziach przeglądarki przeglądarki.

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

Jesteś następnie uruchamiając następujące oświadczenie:

self.xmlHttpReq = new ... 

Kiedy robisz to, zmienna referencyjna xmlHttpReq odnosi się do tej samej zmiennej w obu swoich funkcji (tj window.xmlHttpReq). Ta zmienna jest nadpisywana, gdy wykonujesz drugie wywołanie funkcji, co wyjaśniałoby, dlaczego wydaje się, że uzyskujesz ten sam wynik z obu wywołań funkcji.

Aby rozwiązać ten problem można zadeklarować xmlHttp jako zmiennej lokalnej w zakresie funkcji:

function xmlhttpPostInstagram2(){ 
    var xmlHttpReq; 

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

    //etc... 
}