本文分析的问题,比较奇葩。可能大家在一般的项目中都用不到。所以首先要先了解这个应用场景。反正我分析了之后才发现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