AJAX 的 XMLHttpRequset的对象池

 

在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()方法产生多次请求