Ext Ajax请求队列
程序员文章站
2024-01-27 10:17:46
...
最近在做一个系统时,在删除记录时要求能清楚看到删除的进度,把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 });
上一篇: 14.Python略有小成(模块)
下一篇: JavaScript定时器的开启关闭