İki İki <a href="/questions/tagged/ajax" class="post-tag" title="show questions tagged 'ajax'" rel="tag">ajax</a> çağrıları var

Question

döner aynı sonucu çağırır ve onlara async sesleniyorum:

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

Sorun iki çağrı ile aynı sonuçları alıyorum olduğunu. Eşitlemek için async değiştirirsem, beklenen sonuç olan iki farklı sonuç alıyorum. Ajax async numaralı telefonu arayarak ne diyebiliriz?

jquery'u kullanmak istemiyorum. javascript cevabı takdir edilecektir. jQuery kullanmadan

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

ve

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

açıklanması. Senin durumunda

: İlk işlevini xmlhttpPostInstagram2 çalıştırdığınızda xmlhttpPostInstagram2('firsturl');, sen XMLHttpRequest nesneyi başlatmak xmlhttpPostInstagram3('secondurl'); ve eş zamanlı olarak, ikinci işlevi xmlhttpPostInstagram3 size XMLHttpRequest nesne üzerine:

Bu işlevlere aynı anda aradığınız çünkü ilk istek tamamlanmadı.

Her işlevde bağımsız olarak XMLHttpRequest örneğini bildirmeyi deneyebilirsiniz. Böyle bir şey:

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

Ve: Sonra

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

, aynı anda düzgün bu işlevleri çalıştırabilirsiniz:

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

Ben senin sorunun ilgili olduğunu düşünüyorum kapsamı Sen çizgi var: fonksiyonunun kapsamında

var self = this; 

(I sağladığınız kodundan söyleyebilirim gelen), thiswindow ifade eder. Bu nedenle self, window'a eşittir. Bunu kontrol etmek için, kendi beyannamesi ifadesinden sonra bir console.log(self) ekleyin ve sonucu tarayıcı araçlarınızda kontrol edin.

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

Daha sonra aşağıdaki ifadeyi çalıştıran:

self.xmlHttpReq = new ... 

bunu yapıyorsun, xmlHttpReq değişken referans Fonksiyonlarınızdan hem de aynı değişken (yani window.xmlHttpReq) ifade eder. İkinci işlev çağrısını yaptığınızda bu değişkenin üzerine yazılır, bu da neden her iki işlev çağrısından aynı sonucu aldığınızı açıklar.

Eğer fonksiyonu kapsamında yerel değişken olarak xmlHttp ilan edebilir Bunu düzeltmek için:

function xmlhttpPostInstagram2(){ 
    var xmlHttpReq; 

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

    //etc... 
}