Ajax技术之Ajax重构(封装XMLHttpRequest)

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

一、Ajax重构的步骤

Ajax重构大致可以分为以下3个步骤。

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.loadData(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 id(window.ActiveXObject){
		this.req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(this.req){
		try{
			var loader = this;
			this.req.onreadystatechange = function(){
				ner.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("错误数据\n\n 回调状态："+this.req.readyState+"\n 状态："+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>

具体项目中应用我们上面重构的Ajax，将在下一讲向大家介绍，敬请期待。