Funny-Grumpy-Cat-Images-HD-Wallpaper

Internet Explorer Aborting AJAX Requests : FIXED

on March 19, 2012 by Programming, Technology, Web Programming & Development with 22 comments

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);
}
The following two tabs change content below.

Matthew Mombrea

Matt is a longtime entrepreneur and software engineer. He is a founder of Cypress North, and chief technology officer. Matt also contributes to the community as a columnist on ITworld.com.

22 Comments

  • Andrew
    on April 5, 2012 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.

  • JC
    on April 10, 2012 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.

  • David Edwards
    on September 5, 2012 Reply

    Bravo. This saved me a lot of pain and anguish.

  • Carol
    on September 8, 2012 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.

  • Jeffrey Cartagena
    on September 13, 2012 Reply

    Thanks this helps me

  • Mark
    on September 18, 2012 Reply

    Thanks, just what I needed!

  • Ray
    on September 20, 2012 Reply

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

  • Grant Mills
    on December 18, 2012 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.

  • Michael
    on January 18, 2013 Reply

    Thank you so much for this!

  • Will Durman
    on February 24, 2013 Reply

    You are a god among men. I spent hours trying to figure out this goofy intermittent IE9 problem.

  • Damien
    on March 11, 2013 Reply

    Thanks a lot for this help !

  • Varun Sheth
    on July 17, 2013 Reply

    This is not working for me in IE7 it works in all other versions of IE

    if($.browser.msie && window.XDomainRequest) {
    var xdr = new XDomainRequest();
    xdr.open(“get”, ajaxStatusUrl);

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

    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() {
    alert(‘error’);
    };

    } else {
    $.ajax({
    type: “GET”,
    url: ajaxStatusUrl,
    processData: true,
    dataType: “json”,
    success: function(data) {
    processData(data);
    }
    });
    }
    });

    Also fiddler is not showing a request being made, it says XDomainRequest obejct is undefined

  • Varun Sheth
    on July 18, 2013 Reply

    Hi Matthew thanks for your quick response, I have tried all the methods mentioned in the link however for IE7 it’s still not making the ajax request at all here is my updated code

    $.ajaxSetup({ cache: false });
    if($.browser.msie && window.XDomainRequest) {
    var xdr = new XDomainRequest();
    xdr.open(“post”, ajaxStatusUrl+”?buster=”+ new Date().getTime());

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

    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() {
    alert(‘error’);
    };

    } else {
    $.ajax({
    type: “POST”,
    url: ajaxStatusUrl+”?buster=”+ new Date().getTime(),
    processData: true,
    dataType: “json”,
    success: function(data) {
    processData(data);
    }
    });
    }
    });

    I also changed the server endpoint to accept post instead of get and set the response header to

    header(“Cache-Control: no-cache, no-store”); header(“Expires: Sat, 26 Jul 1997 05:00:00 GMT”); // Date in the past

  • Varun Sheth
    on July 18, 2013 Reply

    so i managed to get the ajax request working in IE with this code change

    if($.browser.msie) {

    if(window.XDomainRequest == undefined) {
    var xdr = new ActiveXObject(‘Msxml2.XMLHTTP’);
    } else {
    var xdr = new XDomainRequest();
    }

    xdr.open(“post”, ajaxStatusUrl+”?buster=”+ new Date().getTime());

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

    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() {
    alert(‘error’);
    };

    } else {

    $.ajax({
    type: “POST”,
    url: ajaxStatusUrl+”?buster=”+ new Date().getTime(),
    processData: true,
    dataType: “json”,
    success: function(data) {
    processData(data);
    }
    });
    }
    });

    however the onload function xdr.onload is throwing an error saying object doesn’t support this property or method

    var xdr = new ActiveXObject(‘Microsoft.XMLHTTP’);

    incase of IE 7

  • Varun Sheth
    on July 18, 2013 Reply

    New UPDATE

    I got the code to work locally

    // Check if the browser is IE
    if($.browser.msie) {

    var xdr;

    // Check if the browser is IE7 or IE 10+
    if(window.XDomainRequest == undefined && window.XMLHttpRequest) {

    xdr = new XMLHttpRequest();

    xdr.onreadystatechange = function() {
    if(xdr.readyState == 4 && xdr.status == 200) {
    var JSON = $.parseJSON(xdr.responseText);

    if(JSON == null || typeof (JSON) == ‘undefined’) {
    JSON = $.parseJSON(data.firstChild,textContent);
    }

    processData(JSON);

    }
    }
    } else { // IE8, IE9
    xdr = new XDomainRequest();

    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() {
    alert(‘error’);
    };
    }

    xdr.open(“post”, ajaxStatusUrl+”?buster=”+ new Date().getTime());

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

    } else { // all other browsers

    $.ajax({
    type: “POST”,
    url: ajaxStatusUrl+”?buster=”+ new Date().getTime(),
    processData: true,
    dataType: “json”,
    success: function(data) {
    processData(data);
    }
    });
    }
    });

    But on production IE 7 is giving access denied

    • kenar716
      on May 28, 2014 Reply

      I tried your code for a POST call to ASP.NET Webservices asmx and your code for IE8 and IE9 always return error 500.

  • Jai
    on September 23, 2013 Reply

    Here is my code which gives ‘JSON Undefined’ in IE 8, Can you please let me know how to convert this below AJAX code using XDR

    var dataToSend =
    {
    ClientId: selClientId
    };

    $.ajax({
    url: ”,
    contentType: ‘application/json; charset=utf-8′,
    type: “POST”,
    data: JSON.stringify(dataToSend),
    dataType: “json”,
    success: function (data) {
    document.getElementById(“dvClientName”).innerHTML = data[0];
    }
    }

    });

  • Dave
    on September 24, 2013 Reply

    Thanks for the help. This was an odd problem to say the least and this does seem to work. Just out of curiosity, do you have any idea what the actual problem is and why this fixes it?

  • Chris
    on November 4, 2013 Reply

    I don’t know why this works but it works! So thank you a lot, you saved a lot of my time!

Leave a Reply