Ly

用Mootools实现一个Ajax队列

因一个项目需要使用Javascript来实现一个排队机制,等上一个队列处理完毕之后,再执行下一个请求。下面是我用Mootools 实现的一个简单的队列Demo.

队列主文件: 来自Trickerise

Request.implement({
     queue: function(sendArg){
     if(!$defined(this.queued))
 this.queued = [];
 this.queued.push(sendArg);
 this.processQueue();
 },
 processQueue: function(){
     if(this.timer)
 $clear(this.timer);
 if (!this.check())
 this.timer = this.processQueue.delay(250, this);
 else {
     if ($defined(this.queued[0])) {
     this.send(this.queued.shift());
 this.processQueue();
 }
 else
 this.fireEvent('onQueueEmpty');
 }
 }
 });

页面执行代码:

window.addEvent('domready', function() {
     var start = $('start');
 var r = new Request({
     //队列请求的url
 'url': '/misc/batch',
 //请求成功之后.将response写入新建的div内.作为对页面的返回结果
 onSuccess: function(response){
     var response = new Element('div', {
     'class': 'request-response',
 'html': response
 });
 $('photo_upload').grab(response, 'bottom');
 response.set('opacity', '0');
 response.fade(1);
 },
 //全部完成之后,向页面写入完成信息
 onQueueEmpty: function(){
     working.set('html', '文件扫描完毕完成...');
 $('loading').set('html',");
 start.removeProperty('disabled');
 start.setProperty('value','重新扫描');
 start.setStyle('color','#000000');
 }
 });
 //队列事件触发
 start.addEvent('click', function(){
     var req = new Request({
     //先用ajax获取一个JSON对象
 method: 'post',
 data:{'action_id':31},
 url: '/misc/ajaxScan',
 onComplete:function(response){
     //解开
 var files = JSON.decode(response);
 var nnn = files.length;
 for(var pp=0; pp<nnn; pp++)
 {
     page_num = pp + 1;
 //构造队列请求的数据内容
 r.queue({
     data: {
     'n':page_num,
 'project_id':'31',
 'project_name':'EE',
 'file_name':files[pp]
 }
 });
 }
 }
 }).send();
 });
 })
- END -
上一篇: Editplus与SubVersion & YUI-Compressor集成
下一篇: YSlow 2.0 B3版本发布&预览