捣鼓一个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请求之功能，本文有任何不足之处，还望各位大虾指教。

巴特西

捣鼓一个Ajax请求管理器

最新文章

热门文章