模拟jQuery的ajax简单实现

/**
 * @author yli
 * @date 2012-08-15
 */

var XmlHttp = {
	get : "get",
	post : "post",
	reqCount : 4,
	createXhr : function() {
		var xmlhttp = null;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlhttp;
	},
	ajax : function(_json) {
		var url = _json["url"];
		var callback = _json["callback"];
		var async = (_json["async"] == undefined ? true : _json["async"]);
		var error = _json["error"];
		var params = _json["params"];
		var method = (_json["method"] == undefined ? XmlHttp.post : _json["method"]).toLowerCase();

		url = XmlHttp.serializeUrl(url);
		params = XmlHttp.serializeParams(params);
		if (method == XmlHttp.get && params != null) {
			url += ("&" + params);
			params = null;	//如果是get请求,保证最终会执行send(null)
		}

		xmlhttp = XmlHttp.createXhr();
		xmlhttp.open(method, url, async);

		if (method == XmlHttp.post) {
			xmlhttp.setRequestHeader("Content-type",
					"application/x-www-form-urlencoded;charset=UTF-8");
		}

		var execount = 0;
		// 异步
		if (async) {
			// readyState 从 1~4发生4次变化
			xmlhttp.onreadystatechange = function() {
				execount++;
				// 等待readyState状态不再变化之后,再执行回调函数
				if (execount == XmlHttp.reqCount) {
					XmlHttp.execBack(xmlhttp, callback, error);
				}
			};
			// send方法要在在回调函数之后执行
			xmlhttp.send(params);
		} else {
			// 同步 readyState 直接变为 4
			// 并且 send 方法要在回调函数之前执行
			xmlhttp.send(params);
			XmlHttp.execBack(xmlhttp, callback, error);
		}
	},
	execBack : function(xmlhttp, callback, error) {
		if (xmlhttp.readyState == 4
				&& (xmlhttp.status == 200 || xmlhttp.status == 304)) {
			callback(xmlhttp);
		} else {
			if (error) {
				error(xmlhttp);
			} else {
				var errorMsg = "no error callback function!";
				if(xmlhttp.responseText) {
					errorMsg = xmlhttp.responseText;
				}
				alert(errorMsg);
				// throw errorMsg;
			}
		}
	},
	serializeUrl : function(url) {
		var cache = "cache=" + Math.random();
		if (url.indexOf("?") > 0) {
			url += ("&" + cache);
		} else {
			url += ("?" + cache);
		}
		return url;
	},
	serializeParams : function(params) {
		var ud = undefined;
		if (ud == params || params == null || params == "") {
			return null;
		}
		if (params.constructor == Object) {
			var result = "";
			for ( var p in params) {
				result += (p + "=" + params[p] + "&");
			}
			return result.substring(0, result.length - 1);
		}
		return params;
	}
};

/*
** 测试
*/

// 执行成功的回调函数
function success(xmlhttp){
	alert(xmlhttp.responseText);
}

//执行失败的回调函数
function error(xmlhttp){
	alert(xmlhttp.responseText);
}

function testAjax() {

	// get 请求
	var url = "http://localhost:8080/WebDemo/UserServlet?name=yli&age=21";

	XmlHttp.ajax({
		url:url,
		callback:success,			// 成功回调函数,必须要写
		error:error,				// 失败回调函数,可以不写
		async:true,					// 默认就是 true
		method:"get",				// 默认是 post
		params:{p1:"111",p2:"222"}	// 即使是get请求，也可以通过 params 提交参数,会和url的参数合并
	});

	// post 请求
	// var url = "http://localhost:8080/WebDemo/UserServlet";

	// XmlHttp.ajax({
		// url:url,
		// callback:success,			// 成功回调函数,必须要写
		// params:{p1:"111",p2:"222"}	// post请求，参数只能通过params提交
	// });
}