Question

I am experiencing a strange problem where IE8 will fire readyState 4 three or four times on an ajax request. This happens often but not always, and only for a couple of specific links – the rest of my ajax links are fine. My object creation and onreadystatechange handler are basic, ie.

function ajaxPost(params) {

    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert('Unsupported Browser');
            }
        }
    }

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            // Do something
        }
    }

    xmlHttp.open("POST", path_to_script);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    xmlHttp.setRequestHeader("Cache-Control", "must-revalidate");
    xmlHttp.send(params);
}

Not sure if this is relevant – but at the points where the problem happens the user has already been navigating an ajax UI. They have clicked several other ajax links without reloading the page – each link uses a new xmlHttpRequest object with the same global variable name (xmlHttp), but each ajax request finishes before another can be issued. Do I need to do any “cleanup” or something for IE8? This has never happened using Safari, Firefox, Chrome, or any other browser.

Any insight would be much appreciated.

Thanks, Brian

Answer 1

Since your xmlHttp object is global, may be IE8 assigns a new onreadystatechange each time you call ajaxPost instead of replacing it.

That may explain an erratic behavior, as it depends on the number of calls to ajaxPost.