jQuery: Making simultaneous ajax requests, is it possible?

Question

I am using jQuery to try and retrieve multiple pieces of data at the same time. The background of the requirement is that different bits of data take various lengths of time to become available, so I want to display each piece as it is returned.

The problem is that the requests seem to 'queue'; the next request does not go until the previous one has returned. After extensive reading, it seems the option 'async: false' might be what I'm after, but this seems to make no difference.

From the TCP/IP debug I can see the browser does not initiate more than one connection; it uses the same connection when the prior request has returned.

I've seen many sites in my time which load data over ajax simultaneously, so obviously it's possible, but I'm tearing my hair out trying to get this working.

Here is my code:

$.ajax({
    type: "GET",
    async: false,
    url: "foo1.php"
    });
$.ajax({
    type: "GET",
    async: false,
    url: "foo2.php"
    });
$.ajax({
    type: "GET",
    async: false,
    url: "foo3.php"
    });

Answer 1

You want asynchronous (which is the default). The browser limits you to two requests at any given time. This is part of the HTTP specification. (HTTP 1.1 specification, section 8.1.4)

Putting the requests into the queue is your best option.

I should note that this can be overridden in Firefox and probably some other browsers. (but as it's not standard, it doesn't help you much)