Loading one AJAX event causes all others to wait for it before processing

Question

I have a single-page application that handles business data. I'm using jQuery .ajax().

On submit of a form, we load in a request via AJAX. No problem there, the "page" is now fully loaded. When it finishes loading, I send off another AJAX request that contains a lot of information - it's a box that loads a bunch of business statistics. This can take up to 15 seconds. During this time, the browser will not process another AJAX request, which in this case is a series of navigation links that load other pages through AJAX. It will start the request, but it appears to be unable to load anything until the statistics-AJAX finishes its load. This is true even when I am accessing a navigation page that is merely HTML. (so it should load instantly)

I am not using async: false. A request looks like:

$.ajax({
    type:'POST',
    url: 'load_navigation',
    data: passed_data,
    success: function(data) {
        $('#div-to-put-result').html(data);
    }
});

Answer 1

The only idea I have is connection limitation. Please refer to: Max parallel http connections in a browser? . I read that it can be limited stronger when you using low bandwidth connection, but do not have reference at this time. As a test you can put hidden IFRAME with get request instead of post ( $.param(passed_data) ). To get data use something like:

var uploadIframe = $("IFRAME");
uploadIframe.load(function() {
    var iframeBody = uploadIframe.contents().find("body");
    data = iframeBody.text();
});

Good luck!