Internet Explorer Aborting AJAX Requests : FIXED

section image

section image

by

section image

Comments (12)

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);
}
My Twitter profileMy Google+ profile

Matthew Mombrea

Chief Technology Officer at Cypress North
Matt Mombrea is a longtime entrepreneur and technology enthusiast. He is a founder of Cypress North, and chief technology officer. Matt specializes in C#, Java, and PHP. He is a contributing writer to ITworld.com. Follow Matt on Twitter and connect with him on LinkedIn.

Comments

  1. Andrew Reply

    This doesn’t work for a POST json operation. If I’m looking to use json data to get a request in a subdomain. Currently M$’s craptacular browsers inhibit such transfer as x-domain. The XDR seems like the only alternative to jsonp, but I’m not seeing it working.

  2. JC Reply

    Thanks. This helped greatly on a get json XDR that was mysteriously barfing in IE9.

    It’s pathetic that IE requires one to jump through such odd hoops.

  4. Carol Reply

    I an not a computer buff could you ive a step by step procedure
    on how to fix this “aborting” problem I have Vista basics.

  7. Ray Reply

    I had given up on a solution until I found this. Now our IE9 users can use SVG, and not Flash! Awesome!

  8. Grant Mills Reply

    Just to save anyone else that has to do this with IE some grief. You have to set the ontimeout, onprogress, onload, onerror, and timeout values AFTER the xdr.open method. Also, on this line:
    setTimeout(function () {
    xdr.send();
    }, 0);
    I had to change it to:
    setTimeout(function () {
    xdr.send();
    }, 500);
    To get it to work. My theory is that initializing this XDomainRequest object takes some time depending on the resources of the client box. 500ms was a good value for us to get a variety of host machines to work consistently.

Leave a Comment

  • (will not be published)

Comment