How to make all AJAX calls sequential?

There's a much better way to do this than using synchronous ajax calls. Jquery ajax returns a deferred so you can just use pipe chaining to make sure that each ajax call finishes before the next runs. Here's a working example with a more in depth example you can play with on jsfiddle.

// How to force async functions to execute sequentially // by using deferred pipe chaining.// The master deferred.var dfd = $.Deferred(),  // Master deferred    dfdNext = dfd; // Next deferred in the chain    x = 0, // Loop index    values = [],     // Simulates $.ajax, but with predictable behaviour.    // You only need to understand that higher 'value' param     // will finish earlier.    simulateAjax = function (value) {        var dfdAjax = $.Deferred();        setTimeout(            function () {                dfdAjax.resolve(value);            },            1000 - (value * 100)        );        return dfdAjax.promise();    },    // This would be a user function that makes an ajax request.    // In normal code you'd be using $.ajax instead of simulateAjax.    requestAjax = function (value) {        return simulateAjax(value);    };// Start the pipe chain.  You should be able to do // this anywhere in the program, even// at the end,and it should still give the same results.dfd.resolve();// Deferred pipe chaining.// What you want to note here is that an new // ajax call will not start until the previous// ajax call is completely finished.for (x = 1; x <= 4; x++) {    values.push(x);    dfdNext = dfdNext.pipe(function () {        var value = values.shift();        return requestAjax(value).            done(function(response) {                // Process the response here.            });    });}

Some people have commented they have no clue what the code does. In order to understand it, you first need to understand javascript promises. I am pretty sure promises are soon to be a native javascript language feature, so that should give you a good incentive to learn.

You have two choices that I can think of. One is to chain them through callbacks. The other is to make the calls synchronous rather than async.

Is there a reason you want them sequential? That will slow things down.

To make the call synchronous, you'll set the async option in the Ajax call to false. See the documentation at http://docs.jquery.com/Ajax/jQuery.ajax#options (click options tab to see them).

The best way you could do this is by chaining callbacks as Nosredna said. I wouldn't recommend using synchronous XMLHttpRequest as they lock your entire application.

There aren't much helper for this as far as I know, but you could do something resembling a callback FIFO.