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

Two async AJAX calls returns same result

本文关键字：返回 结果 调用 AJAX 两个 异步      更新时间：2023-09-26

我有两个ajaxcall，我叫它们async:

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

问题是我从两个调用中得到相同的结果。如果我将async改为同步，我将得到两个不同的结果，这是预期的结果。任何一点是什么搞乱了ajax async调用?

我不想使用jquery

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

不使用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");

现场演示

我认为你的问题与范围有关。你有这样一行:

var self = this;

在函数的作用域中(从您提供的代码中我可以看出)，this指的是window。因此self等于window。要检查这一点，在自我声明语句之后添加一个console.log(self)，并在浏览器开发工具中检查结果。

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

然后运行以下语句:

self.xmlHttpReq = new ...

当你这样做时，xmlHttpReq的变量引用引用了你的两个函数(即window.xmlHttpReq)中的相同变量。当您进行第二次函数调用时，该变量将被覆盖，这可以解释为什么看起来您从两次函数调用中获得相同的结果。

要解决这个问题，可以将xmlHttp声明为函数范围内的局部变量: 
function xmlhttpPostInstagram2(){
  var xmlHttpReq;
  // Mozilla/Safari
  if (window.XMLHttpRequest) {
    xmlHttpReq = new XMLHttpRequest();
  }
  // IE
  else if (window.ActiveXObject) {
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //etc...
}
相关文章：