Internet Explorer Aborting AJAX Requests : FIXED

internet-explorer

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);
}

26 Comments

  1. Author's Headshot
    Andrew 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.

  2. Author's Headshot
    JC 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.

  3. Author's Headshot
    David Edwards September 5, 2012
    Reply

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

  4. Author's Headshot
    Carol 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.

  5. Author's Headshot
    Jeffrey Cartagena September 13, 2012
    Reply

    Thanks this helps me

  6. Author's Headshot
    Mark September 18, 2012
    Reply

    Thanks, just what I needed!

  7. Author's Headshot
    Ray 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!

  8. Author's Headshot
    Grant Mills 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.

  9. Author's Headshot
    Michael January 18, 2013
    Reply

    Thank you so much for this!

  10. Author's Headshot
    Will Durman February 24, 2013
    Reply

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

  11. Author's Headshot
    Damien March 11, 2013
    Reply

    Thanks a lot for this help !

  12. Author's Headshot
    Varun Sheth 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

  13. Author's Headshot
    Varun Sheth 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

  14. Author's Headshot
    Varun Sheth 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

  15. Author's Headshot
    Varun Sheth 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

    • Author's Headshot
      kenar716 May 28, 2014

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

  16. Author's Headshot
    Jai 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];
    }
    }

    });

  17. Author's Headshot
    Dave 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?

  18. Author's Headshot
    Chris 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!

  19. Author's Headshot
    Josh Comley August 9, 2014
    Reply

    Really, really, thank you. I had no idea how you worked this out, and I dread to think how much time you lost 🙁 but it solved my IE9 AJAX woes!!

  20. Author's Headshot
    Anurag March 13, 2015
    Reply

    I generally don't comment on sites. But I just had to here. I spent an entire day figuring out the solution and you sir, solved it for me. 3 in the morning and I feel so effing happy. Thanks a lot 🙂

  21. Author's Headshot
    Mark April 22, 2015
    Reply

    Made my day. Thanks.

  22. Author's Headshot
    Ralph January 4, 2017
    Reply

    Is there a solution using jquery ajax ?

Leave a Reply

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

Meet the Author

mmombrea-headshot
CTO / Partner

Matthew Mombrea

Matt is our Chief Technology Officer and one of the founders of our agency. He started Cypress North in 2010 with Greg Finn, and now leads our Buffalo office. As the head of our development team, Matt oversees all of our technical strategy and software and systems design efforts.

With more than 19 years of software engineering experience, Matt has the knowledge and expertise to help our clients find solutions that will solve their problems and help them reach their goals. He is dedicated to doing things the right way and finding the right custom solution for each client, all while accounting for long-term maintainability and technical debt.

Matt is a Buffalo native and graduated from St. Bonaventure University, where he studied computer science.

When he’s not at work, Matt enjoys spending time with his kids and his dog. He also likes to golf, snowboard, and roast coffee.