Two asynchronous AJAX requests produce identical output

Question

Two asynchronous AJAX requests produce identical output

Two ajax calls are being made asynchronously:

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

The issue is that both calls are returning the same results. Changing async to sync gives the expected different results. Any idea why this is happening with the ajax async call?

A solution without using jquery is preferred, a javascript answer would be great.

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

javascript ajax

Answer 1

Answer №1

Explanation without using jQuery:

In this scenario:

You are invoking the functions

xmlhttpPostInstagram2('firsturl');

and

xmlhttpPostInstagram3('secondurl');

simultaneously. When you execute the first function xmlhttpPostInstagram2, you set up the XMLHttpRequest object, but at the same time, in the second function xmlhttpPostInstagram3, you overwrite the XMLHttpRequest object because the initial request has not finished.

A solution would be to create separate instances of XMLHttpRequest in each function. Here is an example:

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

By utilizing these revised functions, you can effectively run them simultaneously like so:

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

Experience Live Demo

Answer 2

Explanation without using jQuery:

In this scenario:

You are invoking the functions

xmlhttpPostInstagram2('firsturl');

and

xmlhttpPostInstagram3('secondurl');

simultaneously. When you execute the first function xmlhttpPostInstagram2, you set up the XMLHttpRequest object, but at the same time, in the second function xmlhttpPostInstagram3, you overwrite the XMLHttpRequest object because the initial request has not finished.

A solution would be to create separate instances of XMLHttpRequest in each function. Here is an example:

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

By utilizing these revised functions, you can effectively run them simultaneously like so:

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

Experience Live Demo

Answer 3

Answer №2

It appears that the issue you are facing may be related to scope. In your code snippet, there is a line:

var self = this;

Based on the provided code, it seems that within the function's scope, this actually refers to the window object. As a result, assigning this to self makes self point to the window object. To verify this, you can add a console.log(self) statement after declaring self and check the output using your browser's developer tools.

var self = this;
console.log(self); // Outputs Window object in console.

In your subsequent code, you are executing:

self.xmlHttpReq = new ...

This means that xmlHttpReq references the same variable across both functions (i.e., window.xmlHttpReq). Consequently, when you make a call to the second function, it overwrites the value of xmlHttpReq, leading to seemingly identical results from both function calls.

To resolve this issue, you can declare xmlHttpReq as a local variable within each function's scope:

function xmlhttpPostInstagram2(){
  var xmlHttpReq;

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

  // Additional logic here...
}

Answer 4

It appears that the issue you are facing may be related to scope. In your code snippet, there is a line:

var self = this;

Based on the provided code, it seems that within the function's scope, this actually refers to the window object. As a result, assigning this to self makes self point to the window object. To verify this, you can add a console.log(self) statement after declaring self and check the output using your browser's developer tools.

var self = this;
console.log(self); // Outputs Window object in console.

In your subsequent code, you are executing:

self.xmlHttpReq = new ...

This means that xmlHttpReq references the same variable across both functions (i.e., window.xmlHttpReq). Consequently, when you make a call to the second function, it overwrites the value of xmlHttpReq, leading to seemingly identical results from both function calls.

To resolve this issue, you can declare xmlHttpReq as a local variable within each function's scope:

function xmlhttpPostInstagram2(){
  var xmlHttpReq;

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

  // Additional logic here...
}

Two asynchronous AJAX requests produce identical output

Answer №1

Answer №2

Similar questions

Transmitting an array through Socket.IO using the emit() method

Unable to retrieve data from JSON file using Ajax request

I possess an array with a specific structure that I wish to substitute the keys as demonstrated below

jQuery - harnessing the power of JavaScript events such as "dragover"

Node.js: Configuring keep-alive settings in Express.js

jQuery AJAX not properly delivering data to PHP server

What are the steps to incorporating the angular/material version 7.0.1 component into my project?

Stop the replication of HTML/CSS styles during the extraction of content from a div

Angular efficiently organizes data retrieved from various http requests

The shadow effect in three.js differs from that in Unity 3D

Navigate back to the previous HTML page while maintaining the existing data without causing a refresh

Responsive Bootstrap table unable to expand div upon clicking

Redirect to a new page following a toastr notification in an Angular application

Parsing error: Unforeseen token encountered. Consider adding a supplementary loader to manage the output of these loaders

Invalid content detected in React child element - specifically, a [object Promise] was found. This issue has been identified in next js

Equivalent of window.onkeypress in Typescript and NodeJS

how to keep form submission on hold until animation completion with jQuery

JavaScript Language Conversion Templating

What is the best method to calculate the total of multiple input values from various cells and display it in the final cell of an Angular table?

Using Express and Node JS to upload a text file into MongoDB