ajax using POST - "onreadystatech ange" works in opera but not with firefox???

[Heofz]

Hey all,

I've been banging my head against a brick wall on this one for the last 12 hours, and the time has come for me to give up and consult the gurus on this one.

The below URL contains a login page, you can test it using the details
User: marco
Pass: polo

This seems to work PERFECTLY in opera, and it works in firefox but ONLY if I have firebug enabled. I don't care about IE for now, I'll sort that out later.

URL: http://www.doc.ic.ac.uk/project/2006...test/index.htm

The problem lies in the fact that despite the ajax readyState variable evidently changing (as you can see in the debug alert popups), it never executes the code defined by onreadystatecha nge.

If you view in Opera, you'll be able to see that an alert box pops up each time the onreadystatecha nge is triggered.

Can anybody help me? I've consulted google many times and this particular problem doesn't seem to be discussed anywhere.




The source code for my AJAX function:

function ajaxQuery(uid, pw, action) {
    var desturl = "authd.php";
 
    try {
        // Firefox, Safari, Opera 8.0+
        alert ("DEBUG:\nTrying XMLHttpRequest()");
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try {
            alert ("DEBUG:\nXMLHttpRequest() failed.\nTrying ActiveXObject(\"Msxml2.XMLHTTP\")");
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                alert ("DEBUG:\nActiveXObject(\"Msxml2.XMLHTTP\") failed.\nTrying ActiveXObject(\"Microsoft.XMLHTTP\")");
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Web 2.0 not supported by your web browser.");
                return false;
            }
        }
    }
 
    ajaxRequest.onreadystatechange = ajaxRequestHandler; // THIS LINE OF CODE IS HATED BY MOZILLA !!!
 
    ajaxRequest.open("POST", desturl, false);
    ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    ajaxRequest.setRequestHeader("Content-length", 1);
 
    alert("Debugging aJaxQuery() before send():\nreadyState = " + ajaxRequest.readyState);
 
    switch (action) {
        case "auth":     ajaxRequest.send("userID=" + uid + "&password=" + pw + "&action=" + action); break;
        case "reg":     ajaxRequest.send("userID=" + uid + "&password=" + pw + "&action=" + action); break;
        case "accCheck": ajaxRequest.send("userID=" + uid + "&action=" + action); break;
        default: break;
    }
 
    alert("Debugging aJaxQuery() after send():\nreadyState = " + ajaxRequest.readyState);
}
 
function ajaxRequestHandler() {
    alert("Debugging onreadystatechange function():\nreadyState = " + ajaxRequest.readyState);
 
    if (ajaxRequest.readyState == "4") {
        var aResponseT = ajaxRequest.responseText;
        alert("The response should have been: " + aResponseT);
        authResult = aResponseT;
    }
}

[acoder]

It might have to do with the fact that you're making a synchronous request (make the third argument in the open() method true instead of false).

[rook2pawn]

Hey, I just ran into this exact same problem as well!


Whenever you need the synchronous request, think about what javascript is "waiting" for it, then make it asynchronous instead, and put the javascript at the end of the attached callback to the onreadystatecha nge ..

I.e. reverse the order and just say NO to synchronous requests.

[acoder]

Looking back at this, if you have a synchronous request then there's no need for a readystatechang e. It doesn't make sense to call it. When the request is complete, you can assume that the following code would be executed.

[rook2pawn]

Btw , i came up with an in-between solution for creating fake asynchronous requests without multiple xmlHttpRequest objects. The rational is that multiple global http_request variables is ultimately a bad road to walk (closures, portabilty, one coder has to be aware of another coder's environment, etc)

if ((http_request) && (http_request.r eadyState != 4)) {
setTimeout(func tion(){makePOST Request(url, parameters, callback)}, 100);
return;
}

this goes at the beginning of your makePOSTRequest . Its not recursive since the moment it sets the timeout, it ends the function. Whats nice is now you can get all the benefit of multiple XHR requests, without any additional globals, and without any need for synchronous mode.

[acoder]

In effect, this would be similar to making another request in the callback function of the first one. Thanks for posting.