多ajax請求的各類解決方案(同步, 隊列, cancel請求)
2024-09-01 08:29:13
供稿：網友
•多個ajax請求同時發送，相互無依賴。
•多個ajax請求相互依賴，必須有先后順序。
•多個請求被同時發送，只需要最后一個請求。
第1種case
應用場景： 這個場景很多，一個頁面打開是多個區域同時請求后臺得到各自的數據，沒依賴，沒順序。
處理方案： 直接用jquery的ajax函數。這個用的非常多，這里從略，可看后面的代碼中例子。
第2種case
應用場景： 多個ajax請求，需要順序執行，后一個ajax請求的執行參數是前一個ajax的結果。例如： 用戶登錄后我們發送一次請求得到用戶的應用ID，然后利用應用ID發送一次請求得到具體的應用內容（例子雖然不是太恰當，但基本就是這個意思了）。
處理方法：
1. 利用ajax參數async設置為false，進行同步操作。(這個方法只適合同域操作，跨域需使用下面兩種方法)
2. 利用ajax嵌套（這個同第1種情況）
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控件的操作，這個我們可以使用第2種情況的處理方法，但我們可能只需要最后次按鍵后返回的結果，這樣利用第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);
對于這些case都是在多個ajax請求，響應時間不能控制的情況。下面是完整Demo代碼。
代碼如下:
(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) {
