Best approach for dependent ajax calls in jQuery

Question

I have a situation where I need to make 5 ajax calls. The second ajax call will be made after first call returns response, the third call is made when second call completes and likewise fourth and fifth call.

There are 2 approach for this which I know, I could nest ajax calls on success of previous call or make async false before first call and make it true after last call. Could any one suggest which is and WHY it is the better way to accomplish my task or there is some more better way to do this.

//First Way
$.ajax({
...
success:function(){
    $.ajax({
    ...
        success:function(){
            $.ajax({
            ...
                success:function(){
                    $.ajax({
                    ...
                        success:function(){
                              do something      
                        }
                    });
                }
            });
        }
    });
}
});

//second way 
$.ajaxSetup({
    async: false
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajaxSetup({
    async: true
});

Answer 1

Could any one suggest which is and WHY it is the better way to accomplish my task...

Using async: false will make the calls synchronous, which locks up the UI of the browser while the calls are running. It's better to leave the UI responsive while the calls are running.

So leaving the calls asynchronous is best; there are a few ways to do that:

There's using the success handler, as you demonstrated:

$.ajax({
    /*...*/,
    success: function() {
        $.ajax({
            /*...*/,
            success: function() {
                $.ajax({
                    /*...*/,
                    success: function() {
                        $.ajax({
                            /*...*/,
                            success: function() {
                                $.ajax({
                                    /*...*/
                                });
                            }
                        });
                    }
                });
            }
        });
    }
});

(I'm assuming you've either registered a global ajax error handler, or that you have one in /*...*/ above.)

There's using a promise chain instead, which is quite similar:

$.ajax({/*...*/})
    .done(function() {
        $.ajax({/*...*/})
            .done(function() {
                $.ajax({/*...*/})
                    .done(function() {
                        $.ajax({/*...*/})
                            .done(function() {
                                $.ajax({/*...*/});
                            });
                    });
            });
    });

Or you can use a function loop, like so:

(function() {
    var calls = [
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)}
    ];
    var index = 0;
    next();

    function next() {
        if (index < calls.length) {
            // Do the next, increment the call index
            calls[index++]();
        }
    }
})();