没有jquery的多个Ajax调用覆盖值

Question

I am having trouble calling multiple ajax calls together. I am calling following three getXValues functions on page load to set three set of values by changing dome values using setXValues .

In this condition only one function executes and set same value in all three fields.

If i call each following function in previous setXValues values then everything works fine this results in some delay where previous function has to be complete by calling setXValues .

function getIValues(){
    var url = "./Servlet?ajaxAction=getIDetail&id="+id;
    ajaxRequestForChange(url,"I");
}

function getFValues(){
    var url = "./Servlet?ajaxAction=getFDetail&id="+id;
    ajaxRequestForChange(url,"F");
}

function getCValues(){
    var url = "./Servlet?ajaxAction=getCDetail&id="+id;
    ajaxRequestForChange(url,"C");
}

var ajaxRequestForChange = function(url,fun) {
        var strURL = url;
        var xmlHttpRequest = false;
        var self = this;
        // Mozilla, Safari
        if (window.XMLHttpRequest) {
            self.xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            self.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        self.xmlHttpRequest.open("POST", strURL, true);
        self.xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        self.xmlHttpRequest.onreadystatechange = function() {
            if (self.xmlHttpRequest.readyState == 4) {
                if (self.xmlHttpRequest.status == 200) {
                    var htmlString = self.xmlHttpRequest.responseText;

                    if(fun == 'I'){
                        setIValues(htmlString);
                    }
                    if(fun == 'F'){
                        setFValues(htmlString);
                    }
                    if(fun == 'C'){
                        setCValues(htmlString);
                    }

                } else {
                    ajaxFailedCount++;
                    // Try for 1 min (temp fix for racing condition)
                    if (ajaxFailedCount < 1200) {window.setTimeout(function() {ajaxRequest(url)}, 50);}
                    else {alert("Refresh failed!")};
                }
            }
        }
        self.xmlHttpRequest.send(null);
    }

It will be help full if you can provide approach which will resolve my problem.

Note: Please also note that I can't use JQuery since its not part of ui component (I hate it but no choice..)

Thanks in advance for your help.

Answer 1

You problem is one of scope and the context of this . In your function:

var ajaxRequestForChange = function(url,fun) {
    var strURL = url;
    var xmlHttpRequest = false;
    var self = this;
...

You assign var self = this; However the function ajaxRequestForChange is always running in the global scope. So later on when you do:

if (window.XMLHttpRequest) {
    self.xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    self.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpRequest.open("POST", strURL, true);
...

You are using the same obj self for each call to ajaxRequestForChange and overwriting the property xmlHttpRequest every time. Remove the var self = this; and remove self. from all lines that use it and that should fix your problem. So the above becomes:

var ajaxRequestForChange = function(url,fun) {
    var strURL = url;
    var xmlHttpRequest = false;
...

and

if (window.XMLHttpRequest) {
    xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpRequest.open("POST", strURL, true);
...