Using two xmlhttprequest calls on a page

I have two divisions, <div id=statuslist></div><div id=customerlist></div>

The function sendReq() creates a xmlhttprequest and fetches the data into th开发者_开发知识库e division.

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL');

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL');

I have a problem,

The data fetched into the 'customerlist' gets copied onto 'statuslist'

If i change the order of function calls,

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL');

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL');

Now the data of 'statuslist' gets into 'customerlist'..

Whats the problem with the code?

That's also my problem right now. After a thorough research, I've found out that:

If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task - W3Schools.com

Also, thanks to Two xmlHttpRequests in a single page which redirects me to this question Using two xmlhttprequest calls on a page, I was able to solve the problem. By the way, it is a modification of Addsy's answer.

First, create a ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task. Example:

function sendReq(url, callbackFunction)
{
    var xmlhttp

    if (window.ActiveXObject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     xmlhttp = new XMLHttpRequest();
    } 

    xmlhttp.onreadystatechange = function()
    {
       if (xmlhttp.readyState==4 && xmlhttp.status=='200')
       {
            if (callbackFunction) callbackFunction(xmlhttp.responseText);
       }
    }

    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

Second, call the function and pass the necessary parameters. For example:

sendReq("orders_code_get.php?currentquery="+sql, function processResponse( response )
{
    document.getElementById("orders_content").innerHTML="";
    document.getElementById("orders_content").innerHTML=response;
});

I have proven and tested this code and it works.

I have had this before.

Basically you have a scope problem - you have something like this in your sendReq() function?

if (window.ActiveXObject)
{
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
 xmlhttp = new XMLHttpRequest();
} 

And so when you make a second request, the xmlhttp object is over-ridden

You need to create a closure where your xmlhttp objects don't clash

eg

function sendReq(url, callbackFunction)
{
    var xmlhttp

    if (window.ActiveXObject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     xmlhttp = new XMLHttpRequest();
    } 

    ...  probably some other stuff here, setting url etc ...

    xmlhttp.onreadystatechange = function()
    {
       if (xmlhttp.readyState==4&&xmlhttp.status='200')
       {
        if (callbackFunction) callbackFunction(xmlhttp.responseText);
       }
    }

    .. probably more stuff here  ( including xmlhttp.send() ) !! ...

}

you can then pass the callback function as a parameter and when the data is successfully loaded, it will be passed to the callback function. Note that you will need to pass the actual function, not just its name (so no quotes around the function name)

Alternatively, you could do what i do which is just use jQuery - works for most of my js problems ;)

Hope this helps

In fact it is possible to run multiple async xhr call but you have to give them an unique id as parameter to be able to store and load them locally in your DOM.

For example, you'd like to loop on an array and make a ajax call for each object. It's a little bit tricky but this code works for me.

var xhrarray={};
for (var j=0; j<itemsvals.length; j++){
                var labelval=itemsvals[j];
                // call ajax list if present.
                if(typeof labelval.mkdajaxlink != 'undefined'){
                    var divlabelvalue = '<div id="' + labelval.mkdid + '_' +          item.mkdcck + '" class="mkditemvalue col-xs-12 ' + labelval.mkdclass + '"><div class="mkdlabel">' + labelval.mkdlabel + ' :</div><div id="'+ j +'_link_'+ labelval.mkdid +'" class="mkdvalue">'+labelval.mkdvalue+'</div></div>';
                    mkdwrapper.find('#' + item.mkdcck + ' .mkdinstadivbody').append(divlabelvalue);

                    xhrarray['xhr_'+item.mkdcck] = new XMLHttpRequest();
                    xhrarray['xhr_'+item.mkdcck].uniqueid=''+ j +'_link_'+ labelval.mkdid +'';
                    console.log(xhrarray['xhr_'+item.mkdcck].uniqueid);
                    xhrarray['xhr_'+item.mkdcck].open('POST', labelval.mkdajaxlink);
                    xhrarray['xhr_'+item.mkdcck].send();
                    console.log('data sent');
                    xhrarray['xhr_'+item.mkdcck].onreadystatechange=function() {
                        if (this.readyState == 4) {
                            console.log(''+this.uniqueid);
                            document.getElementById(''+this.uniqueid).innerHTML = this.responseText;
                        }
                    };
                }
}

You have to set each xhr object in a global variable object and define a value xhrarray['xhr_'+item.mkdcck].uniqueid to get its unique id and load its result where you want.

Hope that will help you in the future.