本文分析的問題，比較奇葩。可能大家在一般的項目中都用不到。所以首先要先了解這個應用場景。反正我分析了之後才發現jquery全局$.ajax竟然可以這樣用!
1、背景
在頁面中使用ajax請求進行異步操作這個現在比較常用，我們會在ajax開始時候加個進度顯示，在complete之後隱藏即可。但是要是頁面內有多個ajax請求，我們怎麼處理這個進度那？單個單個處理肯定會很麻煩，比如你不知道所有頁面的ajax什麼時候都處理完成，需要很具體的寫代碼才行。
單個ajax請求：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
function GetEditData() { if (ID == null || ID == 0) { return; } //開始啓動進度條 $("#btnnext").html("修改"); $.ajax({ type: "post", url: ajaxUrl, data: { activeid: ID, Operate: "view" }, success: function (data, textStatus) { if (data != null) { $("#txttitle").val(data.title); } else { alert("加載數據失敗:" ); return; } }, complete: function (XMLHttpRequest, textStatus) { //完成了。去除進度條 }, error: function (e) { alert("加載數據失敗。"); return; } }); } |
又或者這個情況：提交表單的所有活動ajax請求失敗時，並觸發錯誤事件.如何停止在jQuery中所有活動的ajax請求，而不trigerring錯誤事件？
2、分析
這裏就用到了ajax的全局變量。具體可以到這裏看看[Jquery $.ajax請求詳解及ajax全局變量分析]。這裏指說明一下我們用的全局變量。
jquery $.ajax有一些全局變量：
| .ajaxComplete() | 當 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxError() | 當 Ajax 請求完成且出現錯誤時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 請求發送之前顯示一條消息。 |
| jQuery.ajaxSetup() | 設置將來的 Ajax 請求的默認值。 |
| .ajaxStart() | 當首個 Ajax 請求完成開始時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxStop() | 當所有 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxSuccess() | 當 Ajax 請求成功完成時顯示一條消息。 |
我們通過這些全局變量就能夠保存每次ajax請求，並在每個ajax請求處理完成後，清理這個緩存。
首先我們定義個實體保存每次ajax請求的數據：
|
1
2
3
4
5
|
function AjaxModel(id, status) { this.id = id; this.status = status; return this;} |
然後在ajax的處理事件中加上邏輯：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// 添加ajax全局事件處理。$(document).ajaxStart(function (a, b, c) { }).ajaxSend(function (e, jqXHR, options) { sendcount++; jqXHR.id = sendcount; var model = new AjaxModel(jqXHR, 0); if (xhrPool.length == 0) { // timer = setInterval("CheckIsAjaxLoadok()", 10);//1000爲1秒鐘 $.fn.jqLoading({ height: 100, width: 240, text: "正在加載中，請耐心等待...." }); } xhrPool.push(model);}).ajaxError(function (e, xhr, opts) {}).ajaxSuccess(function (e, xhr, opts) {}).ajaxComplete(function (e, jqXHR, options) { $.each(xhrPool, function (key, val) { if (val.id.id== jqXHR.id) { val.status = 1; } }); var xhrPooltemp = $.grep(xhrPool, function (x) { return x.status==0 }); if (xhrPooltemp.length == 0) { $.fn.jqLoading("destroy"); } }).ajaxStop(function () {}); |
這裏面最主要的是將ajax的XMLHttpRequest 對象保存到我們定義的array數組中。這裏需要注意：
每次XMLHttpRequest 對象jquery會保存，在ajax 完成後銷燬。所以這裏我們就可以用判斷每個ajax是否完成。XMLHttpRequest 對象是沒有id這個屬性的，我們可以自己給他加上這個屬性。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.ajaxSend(function (e, jqXHR, options) { sendcount++; jqXHR.id = sendcount; var model = new AjaxModel(jqXHR, 0); if (xhrPool.length == 0) { // timer = setInterval("CheckIsAjaxLoadok()", 10);//1000爲1秒鐘 $.fn.jqLoading({ height: 100, width: 240, text: "正在加載中，請耐心等待...." }); } xhrPool.push(model);}) |
jqXHR.id = sendcount;給這個XMLHttpRequest對象加上了id，按照發起請求的順序給他一個id。
在complete函數中，我們找到這個對應id的XMLHttpRequest對象，設置它完成了。
這樣這個頁面的所有ajax請求，我們都能夠管理起來。剩下的能做的事情就很多了。可以判斷每個ajax請求是否完成，中止所有的ajax請求，在全部ajax完成後取消遮罩層等等。
參考文章：
jQuery ajax - ajax() 方法
http://www.w3school.com.cn/jquery/ajax_ajax.asp
停止在jQuery中所有活動的Ajax請求 -- IT專業問題解答 -- 他山知識網
http://www.freeshow.net.cn/questions/fada1e625bf493a9b50938b2235cbb2be05c5a0efda466b1c60341064122f1fe/
原文地址：http://www.suchso.com/projecteactual/jquery-ajax-args-use-global-setup.html