Zwei Asynchron-AJAX-Aufrufe kehren gleiches Ergebnis

Question

ich zwei ajax Anrufe und ich rufe sie async:

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

Das Problem ist, ich die gleichen Ergebnisse aus beiden Anrufen immer bin. Wenn ich async ändere, um zu synchronisieren, erhalte ich zwei verschiedene Ergebnisse, die die erwartete sind. Kann irgendjemand zeigen, was den Ajax async Anruf verwirren?

Ich möchte nicht jquery verwenden. javascript Antwort würde geschätzt werden.

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

und

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

Erklärung ohne jQuery zu verwenden.

In Ihrem Fall:

Sie ruft gleichzeitig auf diese Funktionen: xmlhttpPostInstagram2('firsturl');xmlhttpPostInstagram3('secondurl'); Wenn Sie die erste Funktion xmlhttpPostInstagram2 ausführen, initialisieren Sie das XMLHttpRequest Objekt und gleichzeitig in der zweiten Funktion xmlhttpPostInstagram3 Sie überschreiben die XMLHttpRequest Objekt weil die erste Anfrage nicht abgeschlossen ist.

Sie könnten versuchen, unabhängig eine Instanz von XMLHttpRequest in jeder Funktion zu deklarieren. Etwas wie folgt aus:

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

Und:

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

Dann können Sie diese Funktionen gleichzeitig ordnungsgemäß ausgeführt:

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

Ich denke, Ihr Problem zu tun ist zum Umfang. Sie haben die Zeile:

var self = this; 

Im Rahmen der Funktion (von dem, was ich aus dem Code kann Ihnen sagen, zur Verfügung gestellt haben), bezieht sich auf die thiswindow. Daher ist self gleich window. Um dies zu überprüfen, fügen Sie nach der Selbstdeklaration eine console.log(self) hinzu und überprüfen Sie das Ergebnis in Ihren Browser-Tools.

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

Sie führen dann die folgende Anweisung:

self.xmlHttpReq = new ... 

Wenn Sie dies tun, wird die Variable Bezug von xmlHttpReq bezieht sich auf die gleiche Variable in Ihre beiden Funktionen (das heißt window.xmlHttpReq). Diese Variable wird überschrieben, wenn Sie den zweiten Funktionsaufruf ausführen, was erklären würde, warum Sie bei beiden Funktionsaufrufen das gleiche Ergebnis erhalten.

dies beheben Sie xmlHttp als lokaler Variable im Rahmen der Funktion erklären können:

function xmlhttpPostInstagram2(){ 
    var xmlHttpReq; 

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

    //etc... 
}