javascript - 两个异步 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