當前項目對用戶體驗的要求層出不窮，本篇通過所歷項目與前輩網文日誌加以記錄總結。

　　多個 ajax 請求的各類解決方案：同步，隊列，cancel 請求，本章末尾提供 demo，或點這裏。

　　註意：能一個 ajax 請求解決的問題絕不用兩個 ajax 請求來處理，沒有最好的方案，只有最合適的方案。

　　需求：

　　　　1.多個 ajax 請求同時發送，相互無依賴。

　　　　2.多個 ajax 請求互相依賴，必須有先後順序。

　　　　3.多個 ajax 請求被同時發送，只需要最後一個請求。

　　第 2 種 case

　　應用場景：多個 ajax 請求，需要順序執行，後一個 ajax 請求的執行參數是前一個 ajax 的結果。

　　一個非常經典的例子：用戶登錄後我們發送一次請求得到用戶的應用 ID，然後利用應用 ID 發送一次請求得到具體的應用內容。

　　處理方法：

　　　　1.利用 ajax 參數 async 設置為 false，進行同步操作（這個方法只適合同域操作，跨域需使用下面兩種方法）

　　　　2.利用 ajax 嵌套

　　　　3.利用隊列進行操作，jquery ajax 隊列操作核心代碼：

(function ($) {
    var ajaxRequest = {};

    $.ajaxQueue = function (settings) {
        var options = $.extend({ className: ‘DEFEARTNAME‘ }, $.ajaxSettings, settings);
        
 
var _complete = options.complete;
        $.extend(options, {
            complete: function () {
                if (_complete)
                    _complete.apply(this, arguments);

                if ($(document).queue(options.className).length > 0) {
                    $(document).dequeue(options.className);
                } 
 
else {
                    ajaxRequest[options.className] = false;
                }
            }
        });

        $(document).queue(options.className, function () {
            $.ajax(options);
        });

        if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) {
            ajaxRequest[options.className] = true;
            $(document).dequeue(options.className);
        }
    };


})(jQuery);

　　第 3 種 case

　　應用場景：比較典型的是 autocomplete 控件的操作，case 2 解決方案有些浪費。

　　解決方法：保留最後一次請求，cancel之前的請求，代碼如下：

(function ($) {
var jqXhr = {}；
 $.ajaxSingle = function (settings) {
        var options = $.extend({ className: ‘DEFEARTNAME‘ }, $.ajaxSettings, settings);

        if (jqXhr[options.className]) {
            jqXhr[options.className].abort();
        }

        jqXhr[options.className] = $.ajax(options);
    };
})(jQuery);

　　某500強企業操作平臺解決方案，待整理。

　　由於多個 ajax 請求的響應時間無法控制，可以用 ？解決。完整 demo 如下：

body：

<form id="form1" runat="server">
    <input type="button" id="btnLaunchAsync" value="Launch Asynchronous Request" />
    <input type="button" id="btnLaunchSync" value="Launch Synchronous Request" />
    <input type="button" id="btnLaunchQueue" value="Launch Requested Queue" />
    <input type="button" id="btnLaunchSingle" value="Launch Single Request" />
    <div id="txtContainer"></div>
    </form>

JavaScript：

(function ($) {
    var jqXhr = {},
        ajaxRequest = {};

    $.ajaxQueue = function (settings) {
        var options = $.extend({ className: ‘DEFEARTNAME‘ }, $.ajaxSettings, settings);
        var _complete = options.complete;
        $.extend(options, {
            complete: function () {
                if (_complete)
                    _complete.apply(this, arguments);

                if ($(document).queue(options.className).length > 0) {
                    $(document).dequeue(options.className);
                } else {
                    ajaxRequest[options.className] = false;
                }
            }
        });

        $(document).queue(options.className, function () {
            $.ajax(options);
        });

        if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) {
            ajaxRequest[options.className] = true;
            $(document).dequeue(options.className);
        }
    };

    $.ajaxSingle = function (settings) {
        var options = $.extend({ className: ‘DEFEARTNAME‘ }, $.ajaxSettings, settings);

        if (jqXhr[options.className]) {
            jqXhr[options.className].abort();
        }

        jqXhr[options.className] = $.ajax(options);
    };

})(jQuery);

var ajaxSleep = (function () {
    var _settings = {
        type: ‘GET‘,
        cache: false,
        success: function (msg) {
            var thtml = $(‘#txtContainer‘).html();
            $(‘#txtContainer‘).html(thtml + "<br />" + msg);
        }
    };
    return {
        get: function (seconds, mode, isAsync) {
            var mode = mode || ‘ajax‘,
                        isAsync = isAsync || false;

            $[mode]($.extend(_settings, {
                url: "ResponsePage.aspx?second=" + seconds,
                async: isAsync,
                className: ‘GET‘
            }));
        },
        post: function (seconds, mode, isAsync) {
            var mode = mode || ‘ajax‘,
                        isAsync = isAsync || false;

            $[mode]($.extend(_settings, {
                type: ‘POST‘,
                url: "PostPage.aspx",
                data: { second: seconds },
                async: isAsync,
                className: ‘POST‘
            }));
        }
    };
} ());

var launch = function (settings) {

    $(‘#txtContainer‘).html(‘‘);

    var mode = settings.mode,
                isAsync = settings.isAsync;

    ajaxSleep.get(12, mode, isAsync);
    ajaxSleep.get(10, mode, isAsync);
    ajaxSleep.get(8, mode, isAsync);

    ajaxSleep.post(6, mode, isAsync);
    ajaxSleep.post(4, mode, isAsync);
    ajaxSleep.post(2, mode, isAsync);
}

$(document).ready(function () {
    //第1種case
    $(‘#btnLaunchAsync‘).click(function () {
        launch({ isAsync: true });
    });

    //第2種case
    $(‘#btnLaunchSync‘).click(function () {
        launch({});
    });

    //第2種case
    $(‘#btnLaunchQueue‘).click(function () {
        launch({ mode: ‘ajaxQueue‘, isAsync: true });
    });

    //第3種case
    $(‘#btnLaunchSingle‘).click(function () {
        launch({ mode: ‘ajaxSingle‘, isAsync: true });
    });
});

　　摘自：多ajax請求的各類解決方案（同步, 隊列, cancel請求）

ajax請求解決方法及案例