Multiple, Simultaneous Asynchronous AJAX Requests?

[roopurt18]

I came up semi-dry with google and the search feature built into these forums, so here goes.

 

I'm finding that it would be quite convenient to be able to post multiple AJAX calls simultaneously, but having a bit of trouble with the implementation.  I've created a function called ajaxRun that I use to make my AJAX calls.  The relevant part of the function is where I process the parameter passXMLObj.

 

// ajaxRun
// url - server url to process
// callback - javascript function to use as the callback
// method - GET or POST
// qs - the query string for GET, the post data for POST
// noAsync - true to run non asynchronously
// passXMLObj - pass the xmlobject to the callback function
function ajaxRun(url, callback, method, qs, noAsync, passXMLObj){
  if(!noAsync){
    noAsync = false;
  }

  xmlHttp = GetXmlHttpObject();
  if(xmlHttp == null){
    alert("Your browser does not support AJAX!");
    return;
  }
  url = clientURL() + url;
  if(method=="GET"){
    url = url + "?" + qs;
  }
  // Check if we're passing the XML object to the callback function
  if(passXMLObj){
    var cb = callback;
    callback = function(){
      var xmlObj = xmlHttp;
      cb(xmlObj);
      return;
    }
  }
  // The magic happens next
  xmlHttp.open( method, url, !noAsync );
  xmlHttp.onreadystatechange = callback;
  if(method=="POST"){
    xmlHttp.setRequestHeader('Content-Type',
                             'application/x-www-form-urlencoded');
    xmlHttp.send(qs);
  }else{
    xmlHttp.send(null);
  }
  return;
}

 

I'm testing the code with the following script:

window.ajaxPath_OptBid = "ajax/Builder/Subc/OptionsBidding/";

// cbSelPhasesReady
// xmlObj - The xml http object
// Called when the server responds with the new phases dropdown
function cbSelPhasesReady(xmlObj){
  if( xmlObj && xmlObj.readyState == 4){
    if(xmlObj.status == 200){
      var txt = xmlObj.responseText;
      alert(txt);
    }
  }
  return;
}

function cbTest(xmlObj){
  if( xmlObj && xmlObj.readyState == 4){
    if(xmlObj.status == 200){
      var txt = xmlObj.responseText;
      alert(txt);
    }
  }
  return;
}

// getPhases
// Called when it's time to refresh or retrieve the phase dropdown, usually
// when the project drop down changes.
function getPhases(){
  var fields = new Array;
  fields[0] = document.getElementById("SelProject");
  var qs = ajaxPrepareQS(fields);
  ajaxRun(window.ajaxPath_OptBid + "getSelPhases", cbSelPhasesReady, "POST",
          qs, false, true);
  ajaxRun(window.ajaxPath_OptBid + "test", cbSelPhasesReady, "POST",
          qs, false, true);
  return;
}

 

When getPhases runs I only see the alert from the cbTest, the second callback function.

 

I thought creating an inline function in my ajaxRun would help me save the object for the callback, but it doesn't appear to be working.

 

Any tips?

[roopurt18]

Ah I think I see the problem.  In ajaxRun, the variable xmlHttp is a global variable so even though I'm storing a copy of it in the callback function, the xmlHttp.onreadystatechange is the real callback function and it just gets overwritten by the next call.  Looks like I'll actually have to create multiple xmlHttp objects in an array or something.

[roopurt18]

Turned out to be easier than I thought.

 

In ajaxRun I changed:

 

xmlHttp = GetXmlHttpObject();

 

to

 

var xmlHttp = null;

xmlHttp = GetXmlHttpObject();

 

and now it works.