IE8 freezes when more than 4 asynchronous XmlHttpRequests starts simultaneously

Question

for (var i = 0; i < 5; ++i) {
  var xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
  }
  xhr.open('GET', '/Test/LongOperation?p=' + new Date());
  xhr.send('');
}

This is just a demo (not live code), but it illustrates the main problem. LongOperationis a method that returns a result after 10 seconds.

Questions:

• Why does IE8 (and possibly other IEs) freeze when a user tries to jump from a page right after the above code fragment is executed? FireFox / Safari cancels these requests and allows you to go to another page. If you replace 'i < 5'with 'i < 4', then IE will not hang.

• How to get around this ugly behavior of IE? Users are very upset when their browser hangs unexpectedly.

Answer 1

. xhr window.onbeforeunload. , . $.ajax():

;(function($) {
    var rq = [];
    var ajax = $.ajax;
    $.ajax = function(settings) {
        // override complete() operation
        var complete = settings.complete;
        settings.complete = function(xhr) {
            if (xhr) {
                // xhr may be undefined, for example when downloading JavaScript
                for (var i = 0, len = rq.length; i < len; ++i) {
                    if (rq[i] == xhr) {
                        // drop completed xhr from list
                        rq.splice(i, 1);
                        break;
                    }
                }
            }
            // execute base
            if (complete) {
                complete.apply(this, arguments)
            }
        }

        var r = ajax.apply(this, arguments);
        if (r) {
            // r may be undefined, for example when downloading JavaScript
            rq.push(r);
        }
        return r;
    };

    // 'kill' all pending xhrs
    $(window).bind('beforeunload', function() {
        $.each(rq, function(i, xhr) {
            try {
                xhr.abort();
            } catch(e) {
                $debug.fail('failed to abort xhr');
            }
        });
        rq = [];
    });
})(jQuery);

$debug -

Answer 2

4 . "" XML - , AJAX .

Answer 3

, HTTP-, . , xmlhttp IE, .

Hope this gives you a job for question 2, but I can only guess the true reason for question 1, it might just be a mistake.