See More About:

Introduction to Ajax

13. Multiple Requests

Join the Discussion

More of this Feature

XMLHttpRequest Open Request Response Event Handler Send the Request Passing Parameters Success or Failure Response Type responseText and responseXML Setting Response Type Javascript Object Notation Parsing XML Aborting Ajax

With our requests being asynchronous we are not waiting for one request to return a response from the server before being able to make another request. There is no reason why our visitor cannot initiate further requests to the server before the first request has returned a response. We do have to be a bit careful in how we code this though.

The one thing that we need to avoid is having the same request object used multiple times simultaneously. In the last tutorial we looked at how to avoid this by aborting the previous request if one exists prior to generating the new request. If we instead need to be able to leave that request running and start a new request then we need somewhat different code. Let's start by modifying our code so that we can handle multiple ajax requests more easily.

Any help given gratefully recieved.
Dan.

XMLHttp = function() {
  self = this;
  if (typeof XMLHttpRequest != 'undefined')
  return new XMLHttpRequest();
  else if (window.ActiveXObject) {
    var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0",  "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
    for (var i = avers.length -1; i >= 0; i--) {
      try {httpObj = new ActiveXObject(avers[i]);
      return httpObj;
      } catch(e) {}
    }
  }
  throw new Error('XMLHttp (AJAX) not supported');
}

XMLHttp.prototype.get = function(url) {
  self.open('GET', url, true);
  self.onreadystatechange = function() {
     self.processRequest();}
  self.send(null);
}

XMLHttp.prototype.processRequest = function() {
  if (self.readyState == 4) {
    if (self.status != 200) {
      self.resp = 'Error : Status '+this.status+' returned.';
    } else {
      if (cType == 'text/xml') {
    self.resp = 'xml';
      } else if (cType == 'text/plain') {
    self.resp = 'text';
      } else {
    self.resp = 'unknown content type';
      }
      this.response();
    }
  }
}

ajaxObj = XMLHttp();
ajaxObj.get('myrequest.php');

ajaxObj2 = XMLHttp();
ajaxObj2.get('myrequest.php');

ajaxObj.response = function() {
  if (self.resp == 'xml') {
    alert(self.responseXML);
  } else if (self.resp == 'text') {
    alert(self.responseText);
  } else {
    alert(self.resp);
  }
}
ajaxObj2.response = function() {
  if (self.resp == 'xml') {
    alert(self.responseXML);
  } else if (self.resp == 'text') {
    alert(self.responseText);
  } else {
    alert(self.resp);
  }
}

Now we can create our request object when it doesn't already exist and arrange to create a second request object if the first one does exist. What we do with the responses that we get back can be request dependedt or you may just want to call a common routine passing it whichever response that comes.

if (!ajaxObj) {
ajaxObj = XMLHttp();
ajaxObj.get('myrequest.php');
} else {
ajaxObj2 = XMLHttp();
ajaxObj2.get('myrequest.php');
}
ajaxObj.response = function() {
if (this.resp == 'xml') {
alert(this.responseXML);
} else if (this.resp == 'text') {
alert(this.responseText);
} else {
alert(this.resp);
}
}
ajaxObj2.response = function() {
if (this.resp == 'xml') {
alert(this.responseXML);
} else if (this.resp == 'text') {
alert(this.responseText);
} else {
alert(this.resp);
}
}

Simply replace the alert statements in the above code with whatever processing you wish to perform with XML, text, and errors respectively.

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

JavaScript