最近在做一个系统时,在删除记录时要求能清楚看到删除的进度,把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
});