Internet Explorer Aborting AJAX Requests : FIXED

I've written previously on how to handle AJAX requests for Internet Explorer but recently we came across a strange issue where the requests were being aborted by IE before the response was finished being delivered. Using Fiddler and Firebug, we were able to see that the request was being made properly, and even the response was coming back properly, but at some point, IE would simply stop accepting the data if it was not a very short response.

The problem was even more perplexing because it did not happen every time and it did not happen the same in all versions of IE, in fact IE 9 had more difficulty than IE 7.

You might be familiar with the typical way of making an AJAX request using XDR for Internet Explorer. It would generally look like the following:

//USING JQUERY
if ($.browser.msie && window.XDomainRequest) {
    // Use Microsoft XDR
    var xdr = new XDomainRequest();
    xdr.open("get", "someurl");
    xdr.onload = function () {
    var JSON = $.parseJSON(xdr.responseText);
    if (JSON == null || typeof (JSON) == 'undefined')
    {
        JSON = $.parseJSON(data.firstChild.textContent);
    }
    processData(JSON);
    };
    xdr.send();
}

The process goes like this:

1. Create the XDomainRequest object
2. Define the request type (GET,POST) and the request path (URL) in .open()
3. Define an event handler to capture the response in .onload()
4. Send the request using .send()

Depending on what you are returning, this is usually all you need.If you run into the problem that we were having, you need to do a little more to fix it.

The Solution

The problem has to do with IE timing out the request even though data is being transmitted. By defining some additional event handlers and specifying a timeout value of 0, IE will not abort the request prematurely. Your mileage may vary but for us the solution was to define the following handlers as empty:

        xdr.onprogress = function () { };
        xdr.ontimeout = function () { };
        xdr.onerror = function () { };

Then wrap the send() function in a timeout declaration:

setTimeout(function () {
            xdr.send();
        }, 0);

Producing the final resulting XDR call of:

if ($.browser.msie && window.XDomainRequest) {
    // Use Microsoft XDR
    var xdr = new XDomainRequest();
    xdr.open("get", "someurl");
    xdr.onload = function () {
    var JSON = $.parseJSON(xdr.responseText);
    if (JSON == null || typeof (JSON) == 'undefined')
    {
        JSON = $.parseJSON(data.firstChild.textContent);
    }
    processData(JSON);
    };
    xdr.onprogress = function(){ };
    xdr.ontimeout = function(){ };
    xdr.onerror = function () { };
    setTimeout(function(){
        xdr.send();
    }, 0);
}