Ajax won't get past readyState 1, why?

Question

Hi, 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. But 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

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 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

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.onreadystateshange = readyStateChange;
}

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

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.