Load multiple $.ajax calls simultaneously

Question

I have 3 $.ajax requests in a page that gets JSON content from the server and fills up three separate divs. The content in these three divs is pretty large so it takes a while to load all the content. Also these ajax calls are called on page load, so something like:

 $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: "/controller/action",
            dataType: 'json',
            traditional: true,
            async: false,
            success: function (data) {
                //fill content in div 1
            }
        });

        $.ajax({
            type: 'POST',
            url: "/controller/action2",
            dataType: 'json',
            traditional: true,
            async: false,
            success: function (data) {
                //fill content in div 2
            }
        });

        $.ajax({
            type: 'POST',
            url: "/controller/action3",
            dataType: 'json',
            traditional: true,
            async: false,
            success: function (data) {
                //fill content in div 3
            }
        });
});

My big questions are:

1. How can I make the page load first (and elements such as links functional)
2. After that load these three ajax scripts at the same time. So instead of calling ajax1, ajax2, ajax3; it calls them all at the same time simultaneously.

Thanks a lot! Clockwork

Answer 1

1. The page will load before the ajax calls are fired.
2. If you set async to true, they will all fire at the same time.

Answer 2

The page will load first, your function will be executed once it's ready.

To make the GUI responding and to do the ajax requests simultaneously, remove the async:false option.

Answer 3

You can move this code to $(document).load( .... ).

And the 3 calls will started at the same time. Their finish time is not guaranteed.