AJAX的重构

       AJAX的实现主要依赖于XMLHttpRequest对象，但是在调用其运行异步数据传输时，由于XMLHttpRequest对象的实例在处理时间完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就得重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便。虽然，现在很多开源的AJAX框架都提供了对XMLHttpRequest对象的封装方案，但是如果应用这些框架，通常需要加载很多额外的资源，这势必会浪费很多服务器资源。不过Javascript脚本语言支持OO编程风格，通过它可以将AJAX所必需的功能封装在对象中。

共分三个步骤：

（1）、创建一个单独的JS文件（文件名：AjaxRequest.js）

// JavaScript Document
//AJAX重构
var net=new Object();//定义一个全局的变量
//编写构造函数
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){//非IE浏览器兼容
		this.req=new XMLHttpRequest();//创建XMLHttpRequest对象
	}else if(window.ActiveXObject){//IE浏览器兼容
		try{
			this.req=new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequest对象
		}catch(e){
			try{
				this.req=new ActiveXObject("Msxml2.XMLHTTP");//创建XMLHttpRequest对象
			}catch(e){
				
			}
		}
	}
	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'){
				//设置请求的内容类型
				this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				//设置请求的发出者
				this.req.setRequestHeader("x-requested-with","ajax");
			}
			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("错误数据\n回调状态："+this.req.readyState+"\n状态："+this.req.status);
}

（2）、在需要应用AJAX的页面中应用以下语句

<script type="text/javascript" src="js/AjaxRequest.js"></script>

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

<script type="text/javascript">
    /*错误处理的方法*/
    function onerror(){
        alert("你的操作有误");
    }
    /*实例化Ajax对象的方法*/
    function getInfo(){
        var loader=new net.AjaxRequest('index.jsp',deal_getInfo,onerror,'GET',null);
    }
    /*回调函数*/
    function deal_getInfo(){
        document.querySelector("#objDiv").innerHTML=this.req.responseText;
    }
    //在页面使用Ajax
    window.onload=function(){
        getInfo();
    }
</script>