jquery ajax队列管理插件

2012-04-05 17:52 前端狂奔的蜗牛

在网站实际运行环境中，往往有这样的需求就是一次要发出多个ajax请求，而这些请求是要求有先后顺序的，后一个请求的条件是前一个请求的结果。通过虽然通过设置jquery的ajax请求为同步来解决，不过这样在请求期间就锁定了浏览器，页面不在相应用户的动作，这样的用户体验很不好，那么就需要一个专门管理ajax请求队列的管理器。于是经过一番Google和测试发现了一个不错的ajax的jquery队列管理器。插件代码不多就直接贴出来：

```javascript
;(function($) {
 function AjaxQueue(override) {
 this.override = !!override;
 };
 AjaxQueue.prototype = {
 requests: new Array(),
 offer: function(options) {
 var _self = this;
 var xhrOptions = $.extend({}, options, {
 complete: function(jqXHR, textStatus) {
 if($.isArray(options.complete)) {
 var funcs = options.complete;
 for(var i = 0, len = funcs.length; i < len; i++)
 funcs[i].call(this, jqXHR, textStatus);
 } else {
 if(options.complete)
 options.complete.call(this, jqXHR, textStatus);
 }
 _self.poll();
 },
 beforeSend: function(jqXHR, settings) {
 if(options.beforeSend)
 var ret = options.beforeSend.call(this, jqXHR, settings);
 if(ret === false) {
 _self.poll();
 return ret;
 }
 }
 });
 if(this.override) {
 this.replace(xhrOptions);
 } else {
 this.requests.push(xhrOptions);
 if(this.requests.length == 1) {
 $.ajax(xhrOptions);
 }
 }
 },
 replace: function(xhrOptions) {
 var prevRet = this.peek();
 if(prevRet != null) {
 prevRet.abort();
 }
 this.requests.shift();
 this.requests.push($.ajax(xhrOptions));
 },
 poll: function() {
 if(this.isEmpty()) {
 return null;
 }
 var processedRequest = this.requests.shift();
 var nextRequest = this.peek();
 if(nextRequest != null) {
 $.ajax(nextRequest);
 }
 return processedRequest;
 },
 peek: function() {
 if(this.isEmpty()) {
 return null;
 }
 var nextRequest = this.requests[0];
 return nextRequest;
 },
 isEmpty: function() {
 return this.requests.length == 0;
 }
 };
 var queue = {};
 var AjaxManager = {
 createQueue: function(name, override) {
 return queue[name] = new AjaxQueue(override);
 },
 destroyQueue: function(name) {
 if(queue[name]) {
 queue[name] = null;
 delete queue[name];
 }
 },
 getQueue: function(name) {
 return ( queue[name] ? queue[name] : null);
 }
 };
 $.AM = AjaxManager;
})(jQuery);
```
使用示例：

几个队列的管理方法：

$.AM.createQueue('队列名称');//创建一个队列

$.AM.destroyQueue('队列名称');//销毁一个队列

$.AM.getQueue('队列名称');//获取一个队列

作者：狂奔的蜗牛 出处： http://www.host900.com/

本文版权归作者所有，欢迎转载。未经作者同意下，必须在文章页面明显标出原文链接及作者，否则保留追究法律责任的权利。

如果您认为这篇文章还不错或者有所收获，可以分享给您的小伙伴，因为你的支持是我继续写作，分享的最大动力！

上一篇JS禁止选中文本方法

下一篇jquery.quick-validate 表单验证支持ajax验证