封裝過的Ajax工具類庫

工具類：AjaxUtil.js

var AjaxUtil = {// 基礎選項options : {method : "get", // 預設提交的方法,get posturl : "", // 請求的路徑 requiredparams : {}, // 請求的參數type : 'text', // 返回的內容的類型,text,xml,jsoncallback : 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);}