Ajax的重构

Ajax的重构方法：

（1）创建一个单独的JS文件，命名为AjaxRequest.js，并且在该文件中编写重构Ajax所需要的代码。

var net = new Object();    //创建一个全局变量net
//编写构造函数
net.AjaxRequest = function(url,onload,onerror,method,params){
    this.req = null;
    this.onload = onload;
    this.onerror = (onerror) ? onerror : this.defaultError;
    this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate = function(url,method,params){
    if(!method){
        method = "GET";
    }
    if(window.XMLHttpRequest){
        this.req = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        this.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(this.req){
        try{
            var loader = this;
            this.req.onreadystatechange = function(){
                net.AjaxRequest.onReadyState.call(loader);
            }
            this.req.open(method,url,true);    //建立对服务器的调用
            if(method == "POST"){              //如果提交方式为POST
                this.req.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");   //设置请求头
            }
            this.req.send(params);    //发送请求
        }catch(err){
            this.onerror.call(this);
        }
    }

}
//重构回调函数
net.AjaxRequest.onReadyState = function(){
    var req = this.req;
    var ready = req.readyState;
    if(ready == 4){               //请求完成
        if(req.status == 200){    //请求成功
            this.onload.call(this);
        }else{
            this.onerror.call(this);
        }
    }
}
//重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function(){
    alert("错误数据

回调状态："+this.req.readyState+"
状态："+this.req.status);
}

（2）在需要应用的Ajax的页面中应用一下的语句包括（1）中创建的JS文件

<script language="javascript" src="AjaxRequest.js"></script>

（3）在应用Ajax的页面中编写错误处理的方法、实例化Ajax对象的方法和回调函数。

<script language="javascript">
/*********************错误处理的方法******************/
    function onerror(){
        alert("您的操作有误！");
    }
/*********************实例化Ajax对象的方法************/
    function getInfo(){
        var loader = new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),
            deal_getInfo,onerror,"GET");
    }
/*********************回调函数************************/
    function deal_getInfo(){
        document.getElementById("showInfo").innerHTML=this.req.responseText;
    }
</script>