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

Answer 2

我认为你的问题与范围有关。你有这条线：

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...
}

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

2 个答案: