Ajax won't get past readyState 1, why?

Question

I'm trying to get this function to work, which does a request for parameter url then sends the responseText to callback which is a function.

It seems that it only gets to readyState 1 (thanks to the Firebug commands).

Here it is:

function Request(url, callback){
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else{
    return false;
}
httpRequest.onreadystatechange = function(){
    console.log(httpRequest.readyState);
    if (httpRequest.readyState == 4) {
        callback(httpRequest.responseText);
    }
};
console.log(httpRequest, url);
httpRequest.open('GET', url, true);
httpRequest.send(null);
}

Answer 1

I workarounded this problem assigning onload event instead of onreadystatechange:

function Request(url, callback){
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else{
        return false;
}

var readyStateChange = function(){
    console.log(httpRequest.readyState);

    if (httpRequest.readyState == 4) {
                callback(httpRequest.responseText);
    }
};


if (isFirefox && firefoxVersion > 3) {
    httpRequest.onload = readyStateChange;
} else {
    httpRequest.onreadystatechange = readyStateChange;
}

console.log(httpRequest, url);
httpRequest.open('GET', url, true);
httpRequest.send(null);
}

Answer 2

Check that the URL in question does actually respond by visiting it directly in the browser.

Test with a different browser do you get the same result.

Use some form of HTTP monitor to watch the client to server conversation (my favorite is Fiddler)

Answer 3

Possibly the Ajax request doesn't return data (so, a server side error of some kind). Try enabling the option 'show XMLHttpRequests' in the firebug console, to check for this.

Answer 4

I also faced the same issue. By reading the url below, I got mine solved.

http://bytes.com/topic/javascript/answers/548442-ajax-readystate-1-wall

basically, when I assign my function as the event listener for httpRequest.onreadystatechange, I cannot pass any variable to it. SO that I have to embed the variable inside the HTTP POST string to the server backend then get it back from the HTTP response.

It works fine for FF 3. No need to use jQuery.

Answer 5

I had the same problem on FireFox but not on Chrome.

The problem was my response had the mime-type set to "application/octet-stream".

Changing it to "text/html" made it work on FireFox too.