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

封装过的Ajax工具类库

工具类:AjaxUtil.js

var AjaxUtil = {

	// 基础选项
	options : {
		method : "get", // 默认提交的方法,get post
		url : "", // 请求的路径 required
		params : {}, // 请求的参数
		type : 'text', // 返回的内容的类型,text,xml,json
		callback : function() {
		}// 回调函数 required
	},

	// 创建XMLHttpRequest对象
	createRequest : function() {
		var xmlhttp;
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本
			} catch (e) {
				try {
					xmlhttp = new XMLHttpRequest();
					if (xmlhttp.overrideMimeType) {
						xmlhttp.overrideMimeType("text/xml");
					}
				} catch (e) {
					alert("您的浏览器不支持Ajax");
				}
			}
		}
		return xmlhttp;
	},
	// 设置基础选项
	setOptions : function(newOptions) {
		for ( var pro in newOptions) {
			this.options[pro] = newOptions[pro];
		}
	},
	// 格式化请求参数
	formateParameters : function() {
		var paramsArray = [];
		var params = this.options.params;
		for ( var pro in params) {
			var paramValue = params[pro]; 
			paramsArray.push(pro + "=" + paramValue);
		}
		return paramsArray.join("&");
	},

	// 状态改变的处理
	readystatechange : function(xmlhttp) {
		// 获取返回值
		var returnValue;
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			switch (this.options.type) {
			case "xml":
				returnValue = xmlhttp.responseXML;
				break;
			case "json":
				var jsonText = xmlhttp.responseText;
				if(jsonText){
					returnValue = eval("(" + jsonText + ")");
				}
				break;
			default:
				returnValue = xmlhttp.responseText;
				break;
			}
			if (returnValue) {
				this.options.callback.call(this, returnValue);
			} else {
				this.options.callback.call(this);
			}
		}
	},

	// 发送Ajax请求
	request : function(options) {
		var ajaxObj = this;

		// 设置参数
		ajaxObj.setOptions.call(ajaxObj, options);

		// 创建XMLHttpRequest对象
		var xmlhttp = ajaxObj.createRequest.call(ajaxObj);

		// 设置回调函数
		xmlhttp.onreadystatechange = function() {
			ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
		};

		// 格式化参数
		var formateParams = ajaxObj.formateParameters.call(ajaxObj);

		// 请求的方式
		var method = ajaxObj.options.method;
		var url = ajaxObj.options.url;

		if ("GET" === method.toUpperCase()) {
			url += "?" + formateParams;
		}

		// 建立连接
		xmlhttp.open(method, url, true);

		if ("GET" === method.toUpperCase()) {
			//发送请求
			xmlhttp.send(null);
		} else if ("POST" === method.toUpperCase()) {
			// 如果是POST提交,设置请求头信息
			xmlhttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			//发送请求
			xmlhttp.send(formateParams);
		}
	}
};
一个简单的示例:

function findUser() {
		var userid = $("userid").value;
		if (userid) {
			AjaxUtil.request({
				url:"servlet/UserJsonServlet",
				params:{id:userid},
				type:'json',
				callback:process
			});
		}
	}

	function process(json){
			if(json){
				$("id").innerHTML = json.id;
				$("username").innerHTML = json.username;
				$("age").innerHTML = json.age;
			}
			else{
				$("msg").innerHTML = "用户不存在";
				$("id").innerHTML = "";
				$("username").innerHTML = "";
				$("age").innerHTML = "";
			}
	}


	function $(id) {
		return document.getElementById(id);
	}