Why does $.getJSON() block the browser?

Question

I have a page where I list hardware devices we monitor for customers. Each row displayed also shows the status of the device i.e. whether it\'s running, paused, starting up etc.

Answer 1

Turns out this isn't a problem with the client side:

Would multiple calls to the same ASP.NET MVC action cause the browser to block?

Would multiple calls to the same ASP.NET MVC action cause the browser to block? - Answer

This was being caused by a "by-design" feature of ASP.NET where multiple requests made in the same session are serialised.

Answer 2

It sounds like getJSON is using asynchronous: false as an option to xhr. It kind of suprises me that jquery would use that as a default though, since that is pretty much always a bad idea for the reasons that you are describing.

Don't have the time to look into it more at the moment, but that is the first path I would take.

Answer 3

I have never had problems with $.getJSON(). It is asynchronous as far as I know. What is probably happenning is a javascript error, since you're trying to do:

$('div[data-deviceid="' + deviceId + '"]').text(response);

I'm guessing there is an error here because response is a javascript object or array, not a string. What you should do is text(response.desiredProperty) or text(response[index]) according to the type of object response is.

Since javascript errors sometimes make our browsers behave unexpectedly, this MIGHT (only might) me your problem.

Answer 4

I imagine you're running into browser limitations for handling multiple requests.

Have you tried using Fiddler and looking at the timeline to see what is blocking?

This SO question will probably help:

How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?