您的位置: 首页  >  IT文章  >  小弟我的Ajax简单封装简单调用

小弟我的Ajax简单封装简单调用

分类: IT文章 • 2022-05-04 21:29:50
我的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") {
					var responseJson = eval("(" + responseText + ")");
					responseFunction(responseJson);
				} else if(responseContentType == "TEXT") {
					responseFunction(responseText);
				} else {
					//没有responseContentType参数的情况
					if(responseText.indexOf("<")==0) {
						var responseXml = xmlHttp.responseXML;
						responseFunction(responseXml);
					} else if(responseText.indexOf("{")==0 || responseText.indexOf("[")==0) {
						var responseJson = eval("(" + responseText + ")");
						responseFunction(responseJson);
					} else {
						responseFunction(responseText);
					}
				}
			}
		}
	}
}

 

 

 

相关推荐