How to Run Multiple AJAX Requests in jQuery
jQuery .when() provides a way to execute callback functions based on zero or more Thenable objects , usually Deferred objects that represent asynchronous events .
jQuery Deferred Object turns out to be very nice and simple idea. Deferred allows you to build chainable constructions . Actually, '$.ajax()' always returns deferred object , so you can apply .done() , .fail() functions on it. In the case where multiple Deferred objects are passed to jQuery.when() , the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferred it has been passed. If a Deferred resolved to a single value, the corresponding argument will hold that value. In the case where a Deferred resolved to multiple values, the corresponding argument will be an array of those values.
The following jQuery Ajax() example shows 2 ajax request to flickr API. To iterate through the response, there is a callback function attached to it. This callback function gets executed once both the ajax request are finished.