在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象。
代码如下:
var XMLHttp = { //定义第一个属性,该属性用于缓存XMLHttpRequest对象数组 XMLHttpRequestPool:[], //对象的第一个方法,该方法用于返回一个XMLHttpRequest对象 getInstance:function(){ var len = this.XMLHttpRequestPool.length; //从XMLHttpRequestPool缓冲池中取出一个空闲的XMLHttpRequest对象 for(var i=0;i<len;i++){ //如果XMLHttpRequest的readyState的状态为0或者为4,都表示当前的对象 //XMLHttpRequest对象为闲置的对象 if(this.XMLHttpRequestPool[i].readyState==0 || this.XMLHttpRequestPool[i]==4){ return this.XMLHttpRequestPool[i]; } } //如果没有空闲对象,将再次创建一个XMLHttpRequest对象 this.XMLHttpRequestPool[this.XMLHttpRequestPool.length]= this.createXMLHttpRequest(); return this.XMLHttpRequestPool[this.XMLHttpRequestPool.length-1]; }, //创建新的XMLHttpRequest对象 createXMLHttpRequest:function(){ var xmlHttpRequest = false; //Mozilla,fireFox,Operal浏览器 if(window.XMLHttpRequest){ //针对FireFox, Mozillar, Opera, Safari, IE7, IE8 xmlHttpRequest = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 if(xmlHttpRequest.overrideMimeType){ xmlHttpRequest.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //针对IE6, IE5, IE5.5 //两个可以用于创建XMLHttpRequest对象的控件名称,保存在js的数组中 //排在前面的版本较新 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i = 0; i < activexName.length; i++){ try { //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,会抛出异常,捕捉异常后,可以继续循环,继续尝试创建 xmlHttpRequest = new ActiveXObject(activexName[i]); break; } catch(e) { xmlHttpRequest = false; } } //Mozilla某些版本没有readyState属性 if(xmlHttpRequest.readyState==null){ //直接设置readyState为0 xmlHttpRequest.readyState = 0; //没有readyState属性的浏览器,将load动作与下面的函数关联起来 xmlHttpRequest.addEventListener("load",function(){ if(typeof(xmlHttpRequest.onreadystatechange =="function")){ xmlHttpRequest.onreadystatechange(); } },false); } } if (!xmlHttpRequest || typeof XMLHttpRequest == 'undefined') { Alert("你的浏览器不支持xmlHttpRequest对象!"); return; } return xmlHttpRequest; }, //定义对象的第三个方法,发送请求,参数说明 //method 为发送请求的方法(POST,GET),地址,数据,回调函数 sendRequest:function(method,url,data,async,callback){ var xmlHttpRequest = this.getInstance(); if(xmlHttpRequest){ try{ //加随机数防止缓存,主要目的是防止直接从浏览器读取数据 if(url.indexOf("?")>0){ url+="&time="+new Date().getTime(); }else{ url+="?time="+new Date().getTime(); } //打开与服务器的连接 xmlHttpRequest.open(method,url,async); //设置状态改变的回调函数 xmlHttpRequest.onreadystatechange = function(){ //当服务器的响应完成并获得正常的服务器响应时 if(xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status==200){ callback(xmlHttpRequest); } } } //如果采用POST请求 if(method=="POST"){ //设置请求的头 xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttpRequest.send(data); } //如果采用GET请求 if(method=="GET"){ xmlHttpRequest.send(null); } }catch(e){ alert(e); } } } };
大家看到这个xmlHttpRequest 池其实是创建了一个javascript对象,那面调用的时候只需直接调用这个对象的方法即可。
调用方法:
把以上代码copy保存到一个js文件里,假设取名ajaxpool.js,在html中插入以下代码即可
<script type=”text/javascript” src=”ajaxpool.js” ></script>
<script type=”text/javascript” >
var requestText; //用于接受响应结果
XMLHttp.sendRequest("GET","getMenu",null,false,function(xmlHttpRequest){requestText=xmlHttpRequest.responseText;});
</script>
XMLHttp.sendrequest()方法共5个参数:
1、请求方式。GET,POST
2、请求URL
3、sent的数据,GET方式时一般为NULL,POST方式时,其值为发送的数据
4、true异步,false同步
5、回调函数
通过以上代码就完成了一次Ajax请求,同一页面可多次调用XMLHttp.sendrequest()方法产生多次请求