Ajax请求被阻止

Question

I have a function to perform Ajax requests with a server. The code works but for some reason is blocking the rest of js code. So I have to wait until the request is over. This is really strange as ajax is asynchronous in nature. Any help will be appreciated.

Here's the code

function initRequest(url)
{ 
    var xmlhttp = null;
    if(xmlhttp != null)
    { 
        if(xmlhttp.abort)
            xmlhttp.abort();
        xmlhttp = null; 
    };

    if(window.XMLHttpRequest) // good browsers 
        xmlhttp=new XMLHttpRequest(); 
    else if(window.ActiveXObject) // IE 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    if(xmlhttp == null)
        return null; 

    xmlhttp.open("GET",url,false); 
    xmlhttp.send(null); 

    if(xmlhttp.status >= 200 && xmlhttp.status < 300)// 2xx is good enough 
    return xmlhttp.responseText.split("|"); 
    else 
        return null; 
}

and I call this function like this var res = initRequest('someurl'); if(res) { console.log(res); } console.log('this message will appear when the request is served!! WHY??');

Answer 1

You should implement the onreadystatechange callback on the XMLHttpRequest object and check for status changes in there, instead of waiting blockingly for the response of your server. This method is going to be called for each change of the readyStatus property and will (hopefully) return 200 at some point, after you called xmlhttp.send(...);

Edit: So your code would look like

function initRequest(url, onsuccess, onerror) { 
    // ...
    xmlhttp.onreadystatechange = function () {
        if(this.status >= 200 && this.status < 300) {// 2xx is good enough
            onsuccess(this.responseText.split("|"));
        }
    };
    xmlhttp.open("GET", url);  // its asynchronous by default
    xmlhttp.send(null); 
}

For good measure some helpful links http://www.w3.org/TR/XMLHttpRequest1/ and https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest