ajax队列

ajax高级程序设计上的。

/*
 * 将ajax根据优先级进行排列的方法
 * 构造一个简单的排列函数，接受一个排序的函数
 * 所有添加的ajax保存到_items中
 * 
 */
function PriorityQueue(fn){
	this._items = [];
	if(typeof fn == 'function'){
		this._compare = fn;
	}
}

PriorityQueue.prototype = {
	constructor:PriorityQueue,
	_compare:function(oValue1,oVlaue2){
		if(oValue1<oVlaue2){
			return -1;
		}else if(oValue1 > oVlaue2){
			return 1;
		}else{
			return 0;
		}
	},
	//排序
	prioritze:function(){
		this._items.sort(this._compare)
	},
	//移除并返回第一个ajax  
	get:function(){
		return this._items.shift();
	},
	//返回对列中指定的ajax
	item:function(iPos){
		return this._items[iPos];
	},
	//返回队列中第一个ajax
	peek:function(){
		return this._items[0];
	},
	//将一个ajax插入到队列中，并排序
	put:function(oValue){
		 this._items.push(oValue);
		 this.prioritze();
	},
	//返回队列的长度
	size:function(){
		return this._items.length;
	},
	//移除一个指定的ajax，成功后返回true,否则false
	remove:function(oValue){
		for(var i=0,len=this._items.length;i<len;i++){
			if(this._items[i] == oValue){
				this._items.splice(i,1);  
				return true;
			}
		};
		return false;
	}
}

/*
 * 
 * 
 */
var RequestManager = (function(){
	var oManager =  {
		//队列是最长等待时间
		AGE_LIMIT:60000,
		//默认优先级10
		DEFAULT_PRIORTY:10,
		//检查队列时间间隔
		INTERVAL:250,
		//保存正在执行的ajax
		_active:[],
		//队列实例
		_pending:new PriorityQueue(function(oRequest1,oRequest2){
			return oRequest1.priority - oRequest2.priority;
		}),
		//检查每个ajax的等待时间，如果超出默认的最长时间，则提高该ajax的优先级
		_agePromote:function(){
			for(var i=0;i<this._pending.size();i++){
				var oRequest = this._pending._items[i];
				oRequest.age += this.INTERVAL;
				if(oRequest.age >= this.AGE_LIMIT){
					oRequest.age = 0;
					oRequest.priority--;
				};
			};
			this._pending.prioritze();
		},
		//检查正在执行的ajax状态，
		_checkActiveRequests:function(){
			var oRequest = null;
			var oTransport = null;
			
			for(var i=this._active.length-1; i>=0; i--){
				oRequest = this._active[i];
				oTransport = oRequest.transport;
				if(oTransport.readyState == 4){
					oRequest.active = false;
					this._active.splice(i,1);
					var fnCallback = null;
					if(oTransport.status >= 200 && oTransport.status < 300){
						if(typeof oRequest.onsuccess == 'function'){
							fnCallback = oRequest.onsuccess;
						}
					}else if(oTransport.status == 304){
						if(typeof oRequest.onnotmodified == 'function'){
							fnCallback = oRequest.onnotmodified;
						}
					}else{
						if(typeof oRequest.onfailure == 'function'){
							fnCallback = oRequest.onfailure;
						}
					}
					if(fnCallback != null){
						setTimeout((function(fnCallback,oRequest,oTransport){
							return function(){
								 fnCallback.call(oRequest.scope||window, { 
                                    status : oTransport.status, 
                                    data : oTransport.responseText, 
                                    request : oRequest
								})
							}
						})(fnCallback,oRequest,oTransport),1);
					}
				}
			}
		},
		//封装XMLHttpRequest
		_createTransprot:function(){
			if(typeof XMLHttpRequest != 'undefined'){
				return new XMLHttpRequest();
			}else if(typeof ActiveXObject != 'undefined'){
				var xhr = null;
				try{
					xhr = new ActiveXObject('MSXML2.XmlHttp.6.0');
					return xhr;
				}catch(e){
					try{
						xhr  = new ActiveXObject('MSXML2.XmlHttp.3.0');
						return xhr;
					}catch(e){
						throw Error('cannot create XMLHttp object!');
					}
				}
			}
		},
		//发送一下个请求，检查当前执行的ajax是否小于2，如果是，则激活下一个ajax
		_sendNext:function(){
			if(this._active.length <2){
				var oRequest = this._pending.get();
				if(oRequest != null){
					this._active.push(oRequest);
					oRequest.transport = this._createTransprot();
					oRequest.transport.open(oRequest.type,oRequest.url,true);
					oRequest.transport.send(oRequest.data);
					oRequest.active = true;
				}
			}
		},
		//取消指定的ajax,如果有回调函数oncancel，则执行
		cancel:function(oRequest){
			if(!this._pending.remove(oRequest)){
				oRequest.transport.abort();
				if(this._active[0] === oRequest){
					this._active.shift();
				}else if(this._active[1] === oRequest){
					this._active.pop();
				};
				if(typeof oRequest.oncancel == 'function'){
					oRequest.oncancel.call(oRequest.scope||window,{request:oRequest})
				}
			}
		},
		//添加一个ajax到队列中
		send:function(oRequest){
			if(typeof oRequest.priority != 'number'){
				oRequest.priority = this.DEFAULT_PRIORTY;
			};
			oRequest.active = false;
			oRequest.age = 0;
			this._pending.put(oRequest);
		},
		
		/*
		 * 预置一些方面，方便不知道该如何设置优先的情况
		 * 其实也就是给这些方法加了个默认的优先级
		 */
		poll:function(oRequest){
			oRequest.priority = 3;
			this.send(oRequest);
		},
		
		prefetch:function(oRequest){
			oRequest.priority = 5;
			this.send(oRequest);
		},
		
		submit:function(oRequest){
			oRequest.priority = 0;
			this.send(oRequest);
		},
		
		submitPart:function(oRequest){
			oRequest.priority = 2;
			this.send(oRequest);
		},
	};
	//通过setInterval,不断的检查队列中ajax执行情况，
	//如果执行完，添加下一个
	//如果超过最长等待时间，则提高优先级
	//据说这里之所以不用onreadystatechange是为了避免IE下的内存问题
	//但感觉这样在页面上不停的setinterval，同样让人蛋疼啊！
	setInterval(function(){
		RequestManager._checkActiveRequests();
		RequestManager._sendNext();
		RequestManager._agePromote();
	},oManager.INTERVAL);
	
	return oManager;
})();

/*
用法：
	RequestManager.send({
		priority:0,
		type:'get',
		url:'data.txt',
		onsuccess:function(){},
		onfailure:function(){},
		onnotmodified:function(){}
	})
*/