模拟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 + "&");}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,// 默认就是 truemethod:"get",// 默认是 postparams:{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提交// });}
页:
[1]