How to check completion of multiple ajax requests?

I'm executing multiple(3) ajax requests. How can I check whether all of them have returned successfully, and only after then do something with the output. I thought about chaining the requests, but that way the requests wouldn't be executed simultaneously.

Ultimately I'm trying to load three tables, and after the loading, animate their position. The animation should happen only after all of the tables have been loaded.

Additionally, what could be a good practice to handle multiple ajax calls? At the moment the syntax doesn't look all that "pretty" when it's simply a repetition of the previous.

Thanks!

Here's my code:

// THIS TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true',
  success: function(output) {

    $('#bookingTableThis').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableThis').html(output);
    });

  }

});


// PREV TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=prev',
  success: function(output) {

    $('#bookingTablePrev').animate({
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTablePrev').html(output);  
    });

  }
});


// NEXT TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=next',
  success: function(output) {

    $('#bookingTableNext').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableNext').html(output);
    });

  }

});

Genesis' answer was spot on but unfortunately it generated another problem. Many times I have had trouble passing variables around in Javascript - just as well in this case. The output of each ajax call doesn't like to show up inside the "then" function:

var outputThis;
var outputPrev;
var outputNext;

$.when(function(){

  // THIS TABLE
  $.ajax({
    type: 'POST',
    url:  'includes/content/bookingsystem/b_dayview.php',
    data: $(this).attr('name') + '=true',
    success: function(output) { outputThis = output; }
  });

  // PREV TABLE
  $.ajax({
    type: 'POST',
    url:  'includes/content/bookingsystem/b_dayview.php',
    data: $(this).attr('name') + '=true&dateShift=prev',
    success: function(output) { outputPrev = output; }
  });

  // NEXT TABLE
  $.ajax({
    type: 'POST',
    url:  'includes/content/bookingsystem/b_dayview.php',
    data: $(this).attr('name') + '=true&dateShift=next',
    success: function(output) { outputNext = output; }
  });

}).then(function(){

  // THIS
  $('#bookingTableThis').animate({  
      left: direction + '=820'
  }, 500, function() {
      $('#bookingTableThis').html(outputThis);
  });

  // PREV
  $('#bookingTablePrev').animate({
    left: direction + '=820'
  }, 500, function() {
    $('#bookingTablePrev').html(outputPrev);  
  });

  // NEXT
  $('#bookingTableNext').animate({  
    left: direction + '=820'
  }, 500, function() {
    $('#bookingTableNext'开发者_高级运维).html(outputNext);
  });

}); 

$.when(function(){// THIS TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true',
  success: function(output) {

    $('#bookingTableThis').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableThis').html(output);
    });

  }

});


// PREV TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=prev',
  success: function(output) {

    $('#bookingTablePrev').animate({
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTablePrev').html(output);  
    });

  }
});


// NEXT TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=next',
  success: function(output) {

    $('#bookingTableNext').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableNext').html(output);
    });

  }

});
}).then(function(){
    alert('all of them were done');

});

For the benifit of those who come here in 2012, I found that the syntax of the above answer has been changed to something like the below

$.when(
        $.ajax({
            type: 'GET',
            url: '/api/data/jobtypes',
            dataType: "json",
            success: loadJobTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/servicetypes',
            dataType: "json",
            success: loadServiceTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/approvaltypes',
            dataType: "json",
            success: loadApprovalTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/customertypes',
            dataType: "json",
            success: loadCustomerTypes
        }) 

    ).done(function(){

        alert("all done");
    }); 

pre-initialize a 3-element global array, then store the results in the array. when the array is fully populated, update the page.