捣鼓一个Ajax请求管理器

     随着前端技术的不断发展，现在做的项目里很多页面里都会有大量的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请求之功能，本文有任何不足之处，还望各位大虾指教。