Two AJAX function calls - Best practice

Question

I need the results of two AJAX calls, after which I will use the information retrieved to create a table.

I was curious... is nesting oneAJAX call within the other and keeping the code for creating the table at the end of the 2nd AJAX call the proper way to achieve this?

Thank you for your help.

Answer 1

I'd suggest using jQuery's deferreds for this.

$ajax1 = $.ajax({
    url: '/page1'
});

$ajax2 = $.ajax({
    url: '/page2'
});

$.when($ajax1, $ajax2).done(function(data1, data2){
    // data1[0] is the result of the 1st AJAX call,
    // and data2[0] is the result of the 2nd
    // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
});

Both AJAX calls will be fired and .done will only run once both are finished.

Docs for $.when: http://api.jquery.com/jQuery.when/