两个异步AJAX调用返回相同的结果

Question

我有两个ajax调用,我正在调用它们async:

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

问题是我从两个调用得到相同的结果.如果我async改为同步,我会得到两个不同的结果,这是预期的结果.什么可以指出弄乱ajax async电话的原因是什么？

我不想使用jquery.javascript答案将不胜感激.

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

和

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

不使用 jQuery 的解释。

在你的情况下：

您同时调用这些函数：xmlhttpPostInstagram2('firsturl'); xmlhttpPostInstagram3('secondurl');当您运行第一个函数时xmlhttpPostInstagram2，您会初始化该XMLHttpRequest对象，同时在第二个函数中xmlhttpPostInstagram3您会覆盖该XMLHttpRequest对象，因为第一个请求尚未完成。

您可以尝试在每个函数中独立声明一个实例XMLHttpRequest。像这样的东西：

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

和：

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

然后，您可以同时正确运行这些功能：

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

Live demo