Why would multiple simultaneous AJAX calls to the same ASP.NET MVC action cause the browser to block?

The answer was staring me in the face.

ASP.NET Session State Overview:

Access to ASP.NET session state is exclusive per session, which means that if two different users make concurrent requests, access to each separate session is granted concurrently. However, if two concurrent requests are made for the same session (by using the same SessionID value), the first request gets exclusive access to the session information. The second request executes only after the first request is finished.

Annoyingly I'd skimmed paragraph this a couple of weeks ago not really taking in the full impact of the bold sentences. I had read that simply as "access to session state is serialised" and not "all requests, no matter whether you touch session state or not, are serialised" if the requests came from the same session.

Fortunately there is a work around in ASP.NET MVC3 and its possible to create session-less controllers. Scott Guthrie talks about these here:

Announcing ASP.NET MVC 3 (Release Candidate 2)

I installed MVC3 RC2 and upgraded the project. Decorating the controller in question with [SessionState(SessionStateBehavior.Disabled)] solves the problem.

And of course typically I just found this in Stack Overflow a few minutes ago:

Asynchronous Controller is blocking requests in ASP.NET MVC through jQuery

I was trying to reproduce this but was unable. Here's my test:

private static readonly Random _random = new Random();public ActionResult Ajax(){    var startTime = DateTime.Now;    Thread.Sleep(_random.Next(5000, 10000));    return Json(new {         startTime = startTime.ToString("HH:mm:ss fff"),        endTime = DateTime.Now.ToString("HH:mm:ss fff")     }, JsonRequestBehavior.AllowGet);}

And the call:

<script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script><script type="text/javascript">    $(function () {        for (var i = 0; i < 6; i++) {            $.getJSON('/home/ajax', function (result) {                $('#result').append($('<div/>').html(                    result.startTime + ' | ' + result.endTime                ));            });        }    });</script><div id="result"></div>

And the results:

13:37:00 603 | 13:37:05 96913:37:00 603 | 13:37:06 64013:37:00 571 | 13:37:07 59113:37:00 603 | 13:37:08 73013:37:00 603 | 13:37:10 02513:37:00 603 | 13:37:10 166

And the FireBug console:

As you can see the AJAX action is hit in parallel.

UPDATE:

It seems that in my initial tests the requests are indeed queued in FireFox 3.6.12 and Chrome 8.0.552.215 when using $.getJSON(). It works fine in IE8. My tests were performed with a ASP.NET MVC 2 project, VS2010, Cassini web server, Windows 7 x64 bit.

Now if I replace $.getJSON() with $.get() it works fine under all browsers. That leads me to believe that there is something with this $.getJSON() which might cause the requests to queue. Maybe someone more familiar with the internals of the jQuery framework would be able to shed more light on this matter.

UPDATE 2:

Try setting cache: false:

$.ajax({    url: '/home/ajax',     cache: false,    success: function (result) {        $('#result').append($('<div/>').html(            result.startTime + ' | ' + result.endTime        ));    }});