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);
}

Doughnut

Hi Joe, I'm interested what was your solution? Did you find one? My workaround to this prob was assigning onload event instead of onreadystatechange (see details below in answers). – Patroon

i dunno.... sorry i haven't been on the site for a while. well it worked but I just switched to jQuery and it's working properly. – Doughnut

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);
}

Patroon

Error console: Uncaught ReferenceError: isFirefox is not defined – Turf

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)

Departed

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.

Merrythought

Well it's already on and I log the http object and inspecting it gives me readyState 4, but the event is not being called. Also the page returns data properly – Doughnut

Tried logging my own xmlHTTP lib function in FF, no problem. In my case I use => if (httpRequest.readyState < 4) {console.log(...);} else { [exec the callback]}. – Merrythought

Furthermore: my readystatechange handler is defined after the send method is called. – Merrythought

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.

Destinee

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.

Rouault