在一个页面中,我们可能会使用多个初始化加载函数,包括可能有onload、$(document).ready(function (e) {});。
他们的具体差别不在该文章中涉及,本篇主要分析一下ajax的请求状态及异步同步处理,多个ajax请求的状态监控和分析。
ajax带来很好的用户体验,于是一个稍微注重web系统使用ajax基本成为必然。当传统功能型web项目向用户体验型项目转变时,
-
层出不穷的需求就来了。正如本篇所介绍的就是一个多个AJAX请求的情况下,如何利用jquery来处理几种case。
-
多个ajax请求同时发送,相互无依赖。
-
多个ajax请求相互依赖,必须有先后顺序。
-
多个请求被同时发送,只需要最后一个请求。
第1种case
应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序。
处理方案: 直接用jquery的ajax函数。这个用的非常多,这里从略,可看后面的代码中例子。
第2种case
应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果。例如:
用户登录后我们发送一次请求得到用户的应用ID,然后利用应用ID发送一次请求得到具体的应用内容
(例子虽然不是太恰当,但基本就是这个意思了)。
处理方法:
1. 利用ajax参数async设置为false,进行同步操作。(这个方法只适合同域操作,跨域需使用下面两种方法)
2. 利用ajax嵌套(这个同第1种情况)
3. 利用队列进行操作
1)、ajax请求实际上和http正常的页面打开是一样的返回代码,具体代码查看:
2)、页面多个ajax请求时,我们如何监控每个ajax的执行情况?
这里是有办法的,如果是一个单独的界面我们可以在每个ajax的函数中处理:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$.ajax({
type:
"post"
,
dataType:
"json"
, traditional:
true
,
data: { oper:
"detail"
, id: id },
url: AjaxUrl,
success:
function
(data, textStatus) {
if
(data !=
null
) {
//成功处理
}
},
complete:
function
(XMLHttpRequest, textStatus) {
//完成处理
},
error:
function
(e) {
//异常处理
}
});
|
但是,要是很多页面都需要统一处理,或者需要等到所有ajax请求完成后,才处理下一步请求,就需要有一个监控
该页面所有ajax请求完成情况的全局处理了。这个可以使用jQuery自带的ajax全局变量进行处理。
背景介绍:Jquery ajax全局变量
jquery 提供了一个列表 全局Ajax事件处理程序 。 这些全局事件是发起每一个AJAX请求时产生。如果全局变量jQuery.ajaxSetup()是true。
默认情况下它是true。
-
.ajaxStart——注册一个处理程序被称为第一个AJAX请求时开始;每个页面中所有的ajax请求只发生一次。
-
.ajaxSend——附加一个函数执行之前发送一个AJAX请求;每次发起ajax请求就触发一次。
-
.ajaxError——注册一个处理程序被称为AJAX请求完成时一个错误;
-
.ajaxSuccess——附加一个函数执行时一个AJAX请求成功完成;
-
.ajaxComplete——注册一个处理程序被称为AJAX请求完成;每次发起一次ajaxsend请求就对应一次complete。
-
.ajaxStop——注册一个处理程序被称为当所有AJAX请求已经完成了。
每当一个Ajax请求即将发送,jQuery检查是否有任何其他响应过程中的Ajax请求。如果没有检查到,jQuery就会触发ajaxStart事件。
我们可以使用上面的事件注册程序,把一些通用操作所有AJAX请求在这些事件中简化和统一处理。
一些可能用到的场景如下:
-
显示一个繁忙的图标和阻塞UI每当一个AJAX请求的过程;
-
不管碰到一个AJAX错误显示一条错误消息;
-
重定向用户重定向到登录页面如果web会话到期时一个AJAX请求。
-
监控多个ajax的状态执行情况
-
在页面所有ajaxsend执行完成后,执行下一步的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
sendcount = 0;
var
completecount = 0;
// 添加ajax全局事件处理。
$(document).ajaxStart(
function
(a,b,c) {
}).ajaxSend(
function
(e, xhr, opts) {
sendcount++;
}).ajaxError(
function
(e, xhr, opts) {
}).ajaxSuccess(
function
(e, xhr, opts) {
}).ajaxComplete(
function
(e, xhr, opts) {
completecount++;
if
(sendcount == completecount) {
//进行下一步操作
}
}).ajaxStop(
function
() {
});
|
2)、异步和同步的差别:
$.ajax()其中有一个参数为async: false,false为同步。
ajax是调用xmlhttprequest对象之类(以ie为例)发送请求,而这些对象本来就有并发数的限制,不同的浏览器也是不同的数目限制,ie貌似是2。
有一点要注意,Javascript自身是单线程运行的,所有的主流浏览器只提供一个线程执行Javascript。因此Javascript不能开启额外的线程(除非使用Web Workers,目前最新的浏览器 Safari, Chrome, Opera and Mozilla Firefox支持Web Workers,IE10也会支持)。Javascript中的事件都是线性执行的,通过一个任务队列,可以近似的看做先进先出的模式处理事件的,因此所有的Javascript异步实现都是假象,通过计时器实现的。
Javascript自身单线程运行,不代表ajax是单线程运行,因为ajax是通过XMLHttpRequest这个API实现的,因此是浏览器提供额外的线程去处理http request。一旦请求处理完毕,它会触发一个事件,把这个事件加入到javascript任务队列中,直到javascript处理这个事件。
3)、ajax不执行Success的问题
-
JQuery 中Ajax的一点其它的认识: 客户端发起请求,得到服务器端的相应是200,<正确拿到服务器响应的数据>没有问题.此时在判断进入success 对应的回调函数还是进入到error对应的回调函数之前,可能会校验一些东西:
1. 返回的每条数据是否是dataType中定义的数据类型。如果有部分数据不是或者哪怕一条数据没有严格的按照dataType定义的类型,程序就会进入到error:function(){****}
2. 请求的域和当前域是否是同一域,如果不是同一域也十分有可能进入error:function(){***}
参考代码:
An Example to Use jQuery Global AJAX Event Handlers - CodeProject
多ajax请求的各类解决方案(同步, 队列, cancel请求)的令一种解决方案 - 参禅 - 博客园
http://www.cnblogs.com/spnt/archive/2013/03/21/2973970.html
转载:IT分享 http://www.suchso.com