随着前端技术的不断发展，现在做的项目里很多页面里都会有大量的ajax请求，随之而来就有了一些问题：
1.没必要的ajax请求怎么处理?
2.ajax链式调用怎么维护？
ajax链式调用最原始的写法：
$.ajax({
...,
success:function(data){
$.ajax(...);
}
}) 这里ajax链式调用我们当然可以使用Jquery的Queue或者When...Then(Done)实现，但是大量的ajax链式调用，这样写也会导致代码过于复杂。
Jquery里用Queue实现的ajax链式调用：
$.queue("myAjaxQueue",[
function(){
$.ajax({
...,
success:function(data){
//do something
$.dequeue("myAjaxQueue");
}
})
},
function(){
$.ajax({
...,
success:function(data){
//do something
$.dequeue("myAjaxQueue");
}
})
}
]);
$.dequeue("myAjaxQueue")When...Then(Done)实现的链式调用：
$.when($.ajax({
...
}), $.ajax({
...
})).done(function (xhr1, xhr2) {
//do something
});为了解放自己的双手，少写几行代码，于是决定自己写一个Ajax队列管理器，这里第一个遇到的问题是，怎么让后面的ajax请求知道什么时候轮到他们执行，显然我必须在ajax回调里发出通知，这里我用了函数劫持来动态添加发出通知的代码：首先定义一个函数劫持的封装函数：
/// <summary>通用的函数劫持定义</summary>
/// <param name="obj" type="Object">被劫持的对象</param>
/// <param name="method" type="String">被劫持的方法名</param>
/// <param name="hookLogic" type="Function">劫持逻辑</param>
/// <param name="beforeMethod" type="Boolean">是否在原函数逻辑执行之前执行</param>
hookMethod = function (obj, method, hookLogic, beforeMethod) {
var _method = obj[method];
if (!!_method) {
obj[method] = function () {
if (beforeMethod) {
hookLogic.apply(this, arguments);
_method.apply(this, arguments);
} else {
_method.apply(this, arguments);
hookLogic.apply(this, arguments);
}
}
}
};
然后Ajax队列管理器算是有着落了：
AjaxQueue = function (name) {
/// <summary>Ajax队列管理器</summary>
/// <param name="name" type="String">队列名称</param>
this._name = name;
this._requests = [{}];
$(document).queue(this._name, []);
}
AjaxQueue.prototype = {
Request: function (key, xhrOption) {
/// <summary>将Ajax请求放入队列</summary>
/// <param name="key" type="String">Ajax请求标示，用于管理Ajax状态</param>
/// <param name="xhrOption" type="Object Literal">JQuery Ajax对象参数选项</param>
var self = this;
if (!!xhrOption.complete) {
utils.hookMethod(xhrOption, "complete", ajaxHook, false);
} else {
utils.hookMethod(xhrOption, "success", ajaxHook, false);
utils.hookMethod(xhrOption, "error", ajaxHook, false);
};
function ajaxHook() {
$(document).dequeue(self._name);
}
$(document).queue(self._name, function () {
self.Abort(key);//取消未完成的相同请求
xhr = $.ajax(xhrOption);
self._requests.push({
key: key,
xhr: xhr
});
});
return self;
},
Abort: function (key) {
var self = this;
$.each(self._requests || [], function (i, req) {
if (req.key === key) {
try {
req.xhr.abort();
}
catch (err) {
}
}
});
},
Run: function () {
$(document).dequeue(this._name);
return this;
}
};里面集成了ajax链式调用、取消多余Ajax请求之功能，本文有任何不足之处，还望各位大虾指教。