日期:2014-05-16 浏览次数:20658 次
工具类: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); }