XMLHttpRequest 对象封装

XMLHttpRequest 对象的创建

/* XMLHttpRequest 对象构造器 */
function CallBackObject() {
	this.XmlHttp = this.GetHttpObject();
}

/* 取得 XMLHttpRequest 对象 */
CallBackObject.prototype.GetHttpObject = function() {
	var xmlhttp;
	
	/* 浏览器判断，不同的浏览器、浏览器版本 XMLHttpRequest 对象的创建方式是不同的 */
	/*@cc_on
	 @if (@_jscript_version >= 5)  
	 	try {
	 		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	 	} catch(e) {
	 		try {
	 			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	 		} catch(E) {
	 			xmlhttp = false;
	 		}
	 	}
	@else 
	 	xmlhttp = false;
	@end 
	@*/
	
	if(!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch(e) {
			xmlhttp = false;
		}
	}
	
	return xmlhttp;
}

/**
 * Ajax 回调方法
 * 
 * @param {Object} URL 传入要访问的URL地址作为参数
 */
CallBackObject.prototype.DoCallBack = function(URL) {
	if(this.XmlHttp){
		if(this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0) {
			var oThis = this;
			this.XmlHttp.open('POST', URL);
			this.XmlHttp.onreadystatechange = function() {
				oThis.ReadyStateChange();
			};
			this.XmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			this.XmlHttp.send(null);
		}
	}
}

CallBackObject.prototype.AbortCallBack = function() {
	if(this.XmlHttp) {
		this.XmlHttp.abort();
	}
}

CallBackObject.prototype.OnLoading = function() {
	//Loading
}

CallBackObject.prototype.OnLoaded = function() {
	//Loaded
}

CallBackObject.prototype.OnInteractive = function() {
	//Interactive
}

CallBackObject.prototype.OnComplete = function(responseText, responseXML) {
	//Complete
}

CallBackObject.prototype.OnAbort = function() {
	//Abort
}

CallBackObject.prototype.OnError = function(status, statusText) {
	//Error
}

/**
 * XMLHttpRequest.readyState
 * 		0， 请求未初始化（还没有调用XMLHttpRequest对象的open方法）
 * 		1， 请求已经建立，但是还没有发送（还没有调用XMLHttpRequest对象的send方法）
 * 		2， 请求已发送，正在处理中
 * 		3， 请求在处理中，通常响应中已有部分数据可用，但是服务器还咩有完成响应的生成
 * 		4， 请求成功完成，可以获取并且使用服务器的响应
 */
CallBackObject.prototype.ReadyStateChange = function() {
	if(this.XmlHttp.readyState == 1){
		this.OnLoading();
	} else if (this.XmlHttp.readyState == 2){
		this.OnLoaded();
	} else if (this.XmlHttp.readyState == 3){
		this.OnInteractive();
	} else if (this.XmlHttp.readyState == 4) {
		if(this.XmlHttp.status == 0) {
			//服务器端无任何相应，执行忽略操作
			this.OnAbort();
		} else if (this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK") {
			//请求一切正常，对GET和POST请求的应答文档跟在后面
			this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
		} else {
			//错误处理
			this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);
		}
	}
}

 

 

XMLHttpRequest 对象的使用的简单示例

使用XMLHttpRequest对象向服务器端发送请求的基本流程可以分为5步：

1. 从Web表单中获取需要的数据
2. 建立要连接的URL
3. 打开到服务器的连接
4. 设置服务器在完成后要运行的函数
5. 发送请求

 

function callServer() {
	//从Web表单中获取数据
	var id = document.getElementById("id").value;
	var name = document.getElementById("name").value;
	
	//只有在数据不为空时才发出请求
	if(id == null || id == "") return;
	if(name == null || name == "") return; 
	
	//请求的URL
	/**
	 * escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，而且使用此种方案还可以避免中文乱码的出现。
	 * 当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的值。
	 */
	var url = "logon.jsp?id=" + ｅｓｃａｐｅ(id) + "" + ｅｓｃａｐｅ(ｎａｍｅ);
	
	//访问服务器，打开连接
	xmlHttp.open("GET", url, true);
	
	//设置请求完成时的相应函数
	xmlHttp.onreadystatechange = updatePage;
	
	//发送请求
	xmlHttp.send(null);
}

/* 处理HTTP响应 */
function updatePage() {
	if(xmlHttp.readyState == 4) {
		var response = xmlHttp.responseText; //HTTP请求返回的文本内容
		document.getElementById("duty").value = response;
	}
}