日期:2014-05-16  浏览次数:20784 次

我的Ajax简单封装简单调用

记得JavaEye上有一位牛人用JavaScript封装过Ajax,在他发文的几个月前,我也写个这样的封装。诚然,我写的没有他写的功能全面与封装完美,我的属于简单的方法封装,没有用到面向对象的思想。贴一下我的代码,对于一般的Ajax请求也够用。

?

我提供了post和get这两种请求方式,方法命名用了易于记忆的"doGet"和"doPost",用法上,类似于Jquery的get方法和post方法,只是没有用到JavaScript的面向对象编程而已。

?

先看下两个简单的用法:

?

//异步Get请求
var url1 = "user/deleteUser.action?id=12";
doGet(url1, null, function(data){
	//Todo something ...
	alert(data);
});

//异步Post请求
var url2 = "user/addUser.action";
var formData = "username=rongxinhua&sex=male";
doPost(url, formData, function(data){
	//Todo something ...
	alert(data);
});

?

?

我的Ajax方法库,除了支持get请求和post请求外,还支持三个回传的数据格式,分别是文本格式、XML格式和JSON格式,此外,还支持异步、同步两种交互方式。那好,我们来看一下代码吧:

?

/**
 * 初始化XMLHttpRequest对象
 * 
 * @return
 */
function initXmlHttp() {
	//XMLHttpRequest对象
	var xmlHttp = false;
	if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE6及其以下的IE版本
		var activeXNames = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
		for ( var i = 0; i < activeXNames.length; i++) {
			try {
				xmlHttp = new ActiveXObject(activeXNames[i]);
				break;
			} catch (e) {
			}
		}
	}
	if (!xmlHttp) {
		alert("无法获取XMLHttpRequest, 你的浏览器不支持Ajax。");
	}
	
	return xmlHttp;
}

// info/user.action
// info/user.action?id=123
// info/user.action?id=123&name=tom
// info/user.action?name=tom&name=marry

/**
 * @param url 要访问的路径
 * @param data 要传送的数据,格式:"key1=value1&key2=value2"
 * @param callback 回调函数(留给使用者实现)
 * @param responseContentType 响应内容的类型,支持3种类型:"TEXT","XML","JSON", 没有时自动判断, 
 *            可选,若不输入时,则会根据返回的值字符串作判断
 * @param asyn 执行方式,支持2种方式:true(异步), false(同步)
 * 			  可选, 若不输入时,默认用异步方式执行
 */
function doGet(url, data, responseFunction, responseContentType,asyn) {
	if(asyn==undefined){
		if(responseContentType!=undefined){
			if(typeof responseContentType =='boolean'){
				asyn = responseContentType;
			}
		}
	}
	
	var url = url;
	if(data != null && data != '') {
		if (url.indexOf("?") == -1) {
			url = url + "?" + data;
		} else {
			url = url + "&" + data;
		}
	}
	var xmlHttp = initXmlHttp();
	xmlHttp.onreadystatechange = function() {
		callbackAjax(responseFunction, responseContentType, xmlHttp);
	};
	
	if(asyn==undefined){
		xmlHttp.open("GET", url, true);
	}else if(asyn==false){
		xmlHttp.open("GET", url, false);
	}else{
		xmlHttp.open("GET", url, true);
	}
	xmlHttp.send(null);
}

/**
 * 
 * @param url 要访问的路径
 * @param data 要传送的数据,格式:"key1=value1&key2=value2"
 * @param callback 回调函数(留给使用者实现)
 * @param responseContentType 响应内容的类型,支持3种类型:"TEXT","XML","JSON", 没有时自动判断, 
 *            可选,若不输入时,则会根据返回的值字符串作判断
 * @param asyn 执行方式,支持2种方式:true(异步), false(同步)
 * 			  可选, 若不输入时,默认用异步方式执行
 */
function doPost(url, data, responseFunction, responseContentType,asyn) {
	if(asyn==undefined){
		if(responseContentType!=undefined){
			if(typeof responseContentType =='boolean'){
				asyn = responseContentType;
			}
		}
	}
	var  xmlHttp = initXmlHttp();
	xmlHttp.onreadystatechange = function(){
		callbackAjax(responseFunction, responseContentType,xmlHttp);
	};
	if(asyn==undefined){
		xmlHttp.open("POST", url, true);
	}else if(asyn==false){
		xmlHttp.open("POST", url, false);
	}else{
		xmlHttp.open("POST", url, true);
	}
	xmlHttp.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded");
	xmlHttp.send(data);
}

/**
 * Ajax回调函数
 * @param responseFunction 回调函数(留给使用者实现)
 * @param responseContentType 响应内容的类型,支持3种类型:"TEXT","XML","JSON", 没有时自动判断
 * @param xmlHttp XMLHttpRequest对象
 * @return
 */
function callbackAjax(responseFunction, responseContentType, xmlHttp) {
	// 判断对象的状态是否交互完成
	if (xmlHttp.readyState == 4) {
		// 判断http的交互是否成功
		if (xmlHttp.status == 200) {
			if (responseContentType == "XML") {
				var responseXml = xmlHttp.responseXML;
				responseFunction(responseXml);
			} else {
				var responseText = xmlHttp.responseText;
				if (responseContentType == "JSON")