Send multiple AJAX request concurrently

Actually I am not using jQuery in my application. And another thing is I am using the same reference variable for XMLHttpObject by thinking as soon after completion of of JS function, the local variables will expire, but it didn't happened. I experimented with changing the reference variable, it worked good.
Thankyou all for responding my problem.

Without seeing how your code is setup to function at the moment, one can only guess.
If you have a look at the AJAX tutorials at wschools.com (http://www.w3schools.com/ajax/ajax_examples.asp[^] - particularly: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_callback[^] and http://www.w3schools.com/ajax/ajax_xmlfile.asp[^])

You can see that they use a single function to create the XMLHttpRequest object. When put into a better function than the example they give (which is flawed for me, since they only pass the .responseText to the callback function, rather than the XMLHttpRequest object itself)


I use the following function for GET requests:

function myAjaxRequest(url, callback)
{
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function()
    {
        if (this.readyState==4 && this.status==200)
            callback(this);
    }
    ajax.onerror = function()
    {
        console.log("AJAX request failed to: " + url);
    }
    ajax.open("GET", url, true);
    ajax.send();
}

Which I then pair with a callback function as required. If you look at their XML example, you'll see that you need to process the .responseXML
On the other hand, if you're grabbing normal text, you want to deal with the .responseText

I've just tried the following code (loadXMLDoc2 is called in response to a button click)
as a simple test of sending out a pair of requests at the same time, seems fine. I've always used AjaxToolbox[^] in the past, but rarely need the extra goodies it provides - I'm better off typing the ajax code out into my source, for the savings in size. (AjaxToolbox is 5kb) Much of the goodies are related to form POST handling and to maintain a list of current pending requests, if memory serves me correctly.

function loadXMLDoc2()
{
    myAjaxRequest('cd_catalog.xml', onCdXmlLoaded);
    myAjaxRequest('cd_catalog.xml', onCdXmlLoaded2);
}
function onCdXmlLoaded(ajax)
{
    var xmlDoc = ajax.responseXML;
    var txt ='';

    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
    {
      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("myDiv").innerHTML=txt;
}

function onCdXmlLoaded2(ajax)
{
    var xmlDoc = ajax.responseXML;
    var txt ='';

    x=xmlDoc.getElementsByTagName("TITLE");
    for (i=0;i<x.length;i++)
    {
      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("myDiv2").innerHTML=txt;
}