封装过的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);
}