AJAX：同步还是排队？

I am working on some Webservices with AJAX calls. On my webpage, the user has to select one or more people to join a group.This 'group list' is sent to a PHP page (using POST method) which will execute the associated WebServices.

My problem is about sync/async AJAX calls. I aim to show an animation (a gif for example) during the process, which blocks the user interface, and at the end show the message "Complete". I use two Jquery plugins: Apprise for the message and jquery msg for the animation.

In sync mode: the animation is not displayed, but when the AJAX calls are finished, the message "Complete" is displayed. In async mode: the animation is displayed, but the message "complete" is displayed before the end of the AJAX calls.

So my question is, do I have to queue multiple asynchronous AJAX calls ? Or anything else ?

Yes this may be caused because you have multiple async calls running at the same moment.
I use the following small script to control how many ajax calls are currently running:

$.xhrPool = { calls: [] };
$.xhrPool.abortAll = function () {
    $(this.calls).each(function (idx, jqXHR) {
        jqXHR.abort();
    });
    $.xhrPool.calls = [];
};


// Setup ajax requests
$.ajaxSetup({
    beforeSend: function (jqXHR) {
        $.xhrPool.calls.push(jqXHR);
    },
    complete: function (jqXHR) {
        var isInArray = $.inArray(jqXHR, $.xhrPool.calls);

        if (isInArray > -1) {
            $.xhrPool.calls.splice(isInArray, 1);
        }
    }
});

This way you will have all currently active ajax request in the array $.xhrPool.calls. You could then check if ($.xhrPool.calls.length == 0) and if yes remove your loading animation.

Furthermore you can call $.xhrPool.abortAll() which will stop all active ajax requests.