Two async AJAX calls returns same result

Question

I have two ajaxcalls and I am calling them async:

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

The problem is I am getting the same results from both calls. If I change async to sync, I am getting two different results which is the expected one. Can any one point what is messing up the ajax async call?

I do not want to use jquery. javascriptanswer would be appreciated.

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

and

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

Explanation without using jQuery.

In your case:

You're calling simultaneously to these functions: xmlhttpPostInstagram2('firsturl'); xmlhttpPostInstagram3('secondurl'); When you run the first function xmlhttpPostInstagram2, you initialize the XMLHttpRequest object and simultaneously, in the second function xmlhttpPostInstagram3 you overwrite the XMLHttpRequest object because the first request is not completed.

You might try declaring independently an instance of XMLHttpRequest in each function. Something like this:

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

And:

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

Then, you can run these functions simultaneously properly:

 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

I think your problem is related to scope. You have the line:

var self = this;

In the scope of the function (from what I can tell from the code you have provided), this refers to the window. Therefore self is equal to window. To check this add a console.log(self) after the self declaration statement and check the result in your browser dev tools.

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

You are then running the following statement:

self.xmlHttpReq = new ...

When you are doing this, the variable reference of xmlHttpReq refers to the same variable in both of your functions (i.e. window.xmlHttpReq). This variable is being overwritten when you make the second function call, which would explain why it would appear that you are getting the same result from both function calls.

To fix this you can declare xmlHttp as a local variable within the scope of the function:

function xmlhttpPostInstagram2(){
  var xmlHttpReq;

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

  //etc...
}