How can you make a single callback after multiple AJAX request in jQuery?

AJAX it self is a way to communicate with server and retrieve the required information. You can make AJAX request through client side and can get retrieve data. Sometimes you need to make multiple ajax request and when they all ends, a callback function triggers. This is what I'm going to discuss in this post.
 As a URL for request I'm using Facebook graph data of Bloggerever that is

http://graph.facebook.com/bloggerever

Facebook Graph is an open source data center for developers to get data about any profile,url or page.So lets move on by making a simple AJAX request.

An AJAX request

$.ajax({
    url: "http://graph.facebook.com/bloggerever",
    datatype: 'json',
    success: function (data) {
        var likescount = data.likes;
        $('.likes').append(likescount);
    }
});

The above request will return the number of like the page have. So what if you want to make multiple AJAX request and get a callback after they finish?

The method use to do resolve this problem is to use jQuery defferred object. There are several defferred objects but in this post I'm going to use $.when() and $.done(). So this is how our multiple AJAX requests will be made:

$.when(
$.ajax(),
$.ajax(),
$.ajax()).done(
// Callback after finishing of these requests.);

 Lets make requests of different pages of Facebook using Facebook graph API. For this I'm going to use:

• http://graph.facebook.com/Google
• http://graph.facebook.com/Facebook
• http://graph.facebook.com/bloggerever

Each request will be send separately and after completing all a request a callback will be triggered. However, you can do callback for each too like I've done in below example.

Getting likes of each page

HTML

<span class='bloggerever'></span>
<br>
<span class='facebook'></span>
<br>
<span class='google'></span>
<br>
<span class='complete'></span>

jQuery

$.when(
$.ajax({
    url: "http://graph.facebook.com/bloggerever",
    datatype: 'json',
    success: function (data) {
        var bloggerevercount = data.likes;
        $('.bloggerever').append(bloggerevercount);
    }
}),
$.ajax({
    url: "http://graph.facebook.com/facebook",
    datatype: 'json',
    success: function (data) {
        var facebookcount = data.likes;
        $('.facebook').append(facebookcount);
    }
}),
$.ajax({
    url: "http://graph.facebook.com/google",
    datatype: 'json',
    success: function (data) {
        var googlecount = data.likes;
        $('.google').append(googlecount);
    }
})).done(function () {
    $('.complete').append('done');
});

As it is Asynchronous requests, it means it won't effect the page loading time. Secondly, after each request a success function will trigger and after completion of all a callback function will return (due to $.done()).

Play with values in last callback

Okay, now lets move on using the above codes, the values returned can be played in $.done() means last callback function. For this purpose arguments will be made in function, for each request their will an argument, as the following code have:

$.when(
$.ajax(),
$.ajax(),
    $.ajax()).done(function(argument1,argument2,argument3){
// Callback after finishing of these requests.
});

These arguments should be in order of the requests like for first request only first argument will react. With the use of the above jQuery, I'm going to take sum (addition) of all the likes of Facebook,Google and Blogger Ever by the following code.

jQuery

$.when(
$.ajax({
    // Blogger Ever likes request
}),
$.ajax({
    //Facebook Likes Request
}),
$.ajax({
    //Google Likes request
})).done(function (bloggerever, facebook, google) {
    var totalcount = bloggerever[0].likes + facebook[0].likes + google[0].likes;
    $('.totalcount').append(totalcount);
});

Once the requests have been made, then the data is stored in array this is the reason you need to put [0] after each argument in function.