Ext Ajax请求队列

最近在做一个系统时，在删除记录时要求能清楚看到删除的进度，把ajax写在一个循环中，看到一个现象，在Firefox中，可以看到删除的进度，可是在IE,Chrome中不能看到进度，即删除十条记录里，直能看到最后一条的进度，编写了这个ajax请求除列组件，解决了这个情况;有什么不足的地方欢迎指出，谢谢大家。

/**
 * Ajax请求队列
 * @usage var queue = new Ext.util.AjaxQueue({
 * 			  scope : this,
 * 			  listeners : {
 * 			      'beforequeue' : function(AjaxQueue){},
 * 			      'executequeue' : function(){},
 *                'afterqueue' : function(){}
 * 			  }	  
 * 	
 * 		  });
 * 		  queue.add({
 * 		  	  url : 'XXX',
 * 			  success : function(){
 * 
 *            }
 *            ....
 *        })
 *        queue.run();
 */
Ext.util.AjaxQueue = function(cfg){
	this.items = [];
	this.nowIndex = 0;
	this.ajaxCount = 0;
	
	this.addEvents(
		//队列开始执行前事件,若事件返回false，则终止执行队列
		'beforequeue',
		//当整个队列被执行完毕后的事件,true执行成功，false执行失败
		'afterqueue',
		//任意一个队列执行完后的事件
		'executequeue'
	);
	
	this.listeners = cfg.listeners;
	
    Ext.util.AjaxQueue.superclass.constructor.call(this);
};

Ext.extend(Ext.util.AjaxQueue,Ext.util.Observable,{
	
	//添加Ajax请求到队列中
	add : function(params){
		this.items.push(params);
		this.ajaxCount++;
	},
	
	//执行队列
	run : function(){
		//当触发beforequeue事件返回false时，终止队列的执行
		if(this.fireEvent("beforequeue", this) === false){
			return;
		}
		this.doExecute(this.items[this.nowIndex], this.doCallBack, this.nowIndex,this);
	},
	
	doExecute : function(jsonObj,callback,nowIndex,ajaxQueue){
		var sucHandler = jsonObj.success;
		var faiHandler = jsonObj.failure;
		var ajaxOptions = {
			success : function(response,options) {
				sucHandler(response,jsonObj.params);
				callback(ajaxQueue);
			},
			failure : function() {
				faiHandler.call();
				callback(ajaxQueue);
			}
		};
		Ext.apply(jsonObj, ajaxOptions);

		return Ext.Ajax.request(jsonObj);
	},
	
	doCallBack : function(ajaxQueue){
		//当执行到这里后说明一个请求已被执行，这里触发执行队列里一个请求的事件
		ajaxQueue.fireEvent('executequeue',jsonObj,ajaxQueue.nowIndex);
		ajaxQueue.nowIndex++;
		if(ajaxQueue.nowIndex >= ajaxQueue.ajaxCount) {
			ajaxQueue.fireEvent("afterqueue",ajaxQueue);
			ajaxQueue.callback.call(ajaxQueue.scope || ajaxQueue);
			return;
		}
		var jsonObj = ajaxQueue.items[ajaxQueue.nowIndex];
		ajaxQueue.doExecute(jsonObj,ajaxQueue.doCallBack, ajaxQueue.nowIndex,ajaxQueue);
	},
	
	callback : Ext.emptyFn
});

评论

2 楼 jn_nian 2012-07-24  

shine22fmf 写道

看不懂啊看不懂！

就是当发送一个ajax请求后，在回调函数中再继续进行下一个ajax进求，如此下去，直到队列中所有的请求都发送完

1 楼 shine22fmf 2012-07-24  

看不懂啊看不懂！