在一个页面中，我们可能会使用多个初始化加载函数，包括可能有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