Weird XMLHttpRequest error in IE – just one call allowed

Recently in a project I’ve been working on, I stumbled across something that I haven’t seen before: one AJAX call was possible to make in the web page, but after that it stopped working.

To give you some context: this (naturally) only occurred in Internet Explorer, both with the native XMLHttpRequest in IE 7 and an ActiveXObject for IE 6. A sidenote, but if anyone’s wondering: I use a try...catch statement to find the supported ActiveXObject in the visiting web browser:


try {
    this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
}
catch(e){
    try {
        this.xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    }
    catch(e){
        try {
            this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            this.xmlHttp = null;
        }
    }
}

My unsuccessful approach

My initial approach was to create the object once, and then use it for the consecutive calls when needed. This would be opposed to creating an object, making the calls and then deleting the object for each AJAX call. Silly little me thought this would be good for performance, and basically just refrain from superfluous object creation. But, apparently, the call just “stuck” in IE after it was completed, preventing the possibility to make any more calls.

A cut down version of the (originally object-oriented and fancy ;-)) code was:


var xmlHttp = null;
/*
    This function was called as soon as the page
    had loaded, so xmlHttp was always available
*/    
function createXMLHttpRequest(){
    if(typeof XMLHttpRequest != "undefined"){
        xmlHttp = new XMLHttpRequest();
    }
    else if(typeof window.ActiveXObject != "undefined"){
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
        }
        catch(e){
            try {
                xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
            }
            catch(e){
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){
                    xmlHttp = null;
                }
            }
        }
    }
}

function getTheContent(url){
	xmlHttp.abort(); // Tried both with and without this
	xmlHttp.onreadystatechange = contentIsReady;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}

function contentIsReady(){
    if(xmlHttp && xmlHttp.readyState == 4){
        // Do some magic
    }
}

The one that worked

This is basically the same code as above, with the exception that the XMLHttpRequest object is created each time, and discarded once the call is done.


function createXMLHttpRequest(){
    var xmlHttp = null;
    if(typeof XMLHttpRequest != "undefined"){
        xmlHttp = new XMLHttpRequest();
    }
    else if(typeof window.ActiveXObject != "undefined"){
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
        }
        catch(e){
            try {
                xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
            }
            catch(e){
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){
                    xmlHttp = null;
                }
            }
        }
    }
    return xmlHttp;
}

function getTheContent(url){
    if(xmlHttp){
        xmlHttp.abort();
    }
    // Create the object each time a call is about to be made
    if(createXMLHttpRequest()){
	xmlHttp.onreadystatechange = contentIsReady;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
    }
}

function contentIsReady(){
    if(xmlHttp && xmlHttp.readyState == 4){
        // Do some magic
        
        // Delete the object after the call is done
        xmlHttp = null;
    }
}

Any ides why it doesn’t work?

With those examples I have to ask you: do you have any ideas why it wouldn’t work with a single object creation? How come one call is ok, but it then just stops working?

Posted in Developing,JavaScript,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>