我的Ajax简单封装简单调用
记得JavaEye上有一位牛人用JavaScript封装过Ajax，在他发文的几个月前，我也写个这样的封装。诚然，我写的没有他写的功能全面与封装完美，我的属于简单的方法封装，没有用到面向对象的思想。贴一下我的代码，对于一般的Ajax请求也够用。
?
我提供了post和get这两种请求方式，方法命名用了易于记忆的"doGet"和"doPost"，用法上，类似于Jquery的get方法和post方法，只是没有用到JavaScript的面向对象编程而已。
?
先看下两个简单的用法：
?
//异步Get请求var url1 = "user/deleteUser.action?id=12";doGet(url1, null, function(data){//Todo something ...alert(data);});//异步Post请求var url2 = "user/addUser.action";var formData = "username=rongxinhua&sex=male";doPost(url, formData, function(data){//Todo something ...alert(data);});?
?
我的Ajax方法库，除了支持get请求和post请求外，还支持三个回传的数据格式，分别是文本格式、XML格式和JSON格式，此外，还支持异步、同步两种交互方式。那好，我们来看一下代码吧：
?
/** * 初始化XMLHttpRequest对象 * * @return */function initXmlHttp() {//XMLHttpRequest对象var xmlHttp = false;if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE6及其以下的IE版本var activeXNames = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];for ( var i = 0; i < activeXNames.length; i++) {try {xmlHttp = new ActiveXObject(activeXNames[i]);break;} catch (e) {}}}if (!xmlHttp) {alert("无法获取XMLHttpRequest, 你的浏览器不支持Ajax。");}return xmlHttp;}// info/user.action// info/user.action?id=123// info/user.action?id=123&name=tom// info/user.action?name=tom&name=marry/** * @param url 要访问的路径 * @param data 要传送的数据,格式："key1=value1&key2=value2" * @param callback 回调函数(留给使用者实现) * @param responseContentType 响应内容的类型，支持3种类型："TEXT","XML","JSON", 没有时自动判断, * 可选，若不输入时，则会根据返回的值字符串作判断 * @param asyn 执行方式，支持2种方式：true(异步), false(同步) * 可选, 若不输入时，默认用异步方式执行 */function doGet(url, data, responseFunction, responseContentType,asyn) {if(asyn==undefined){if(responseContentType!=undefined){if(typeof responseContentType =='boolean'){asyn = responseContentType;}}}var url = url;if(data != null && data != '') {if (url.indexOf("?") == -1) {url = url + "?" + data;} else {url = url + "&" + data;}}var xmlHttp = initXmlHttp();xmlHttp.onreadystatechange = function() {callbackAjax(responseFunction, responseContentType, xmlHttp);};if(asyn==undefined){xmlHttp.open("GET", url, true);}else if(asyn==false){xmlHttp.open("GET", url, false);}else{xmlHttp.open("GET", url, true);}xmlHttp.send(null);}/** * * @param url 要访问的路径 * @param data 要传送的数据,格式："key1=value1&key2=value2" * @param callback 回调函数(留给使用者实现) * @param responseContentType 响应内容的类型，支持3种类型："TEXT","XML","JSON", 没有时自动判断, * 可选，若不输入时，则会根据返回的值字符串作判断 * @param asyn 执行方式，支持2种方式：true(异步), false(同步) * 可选, 若不输入时，默认用异步方式执行 */function doPost(url, data, responseFunction, responseContentType,asyn) {if(asyn==undefined){if(responseContentType!=undefined){if(typeof responseContentType =='boolean'){asyn = responseContentType;}}}var xmlHttp = initXmlHttp();xmlHttp.onreadystatechange = function(){callbackAjax(responseFunction, responseContentType,xmlHttp);};if(asyn==undefined){xmlHttp.open("POST", url, true);}else if(asyn==false){xmlHttp.open("POST", url, false);}else{xmlHttp.open("POST", url, true);}xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send(data);}/** * Ajax回调函数 * @param responseFunction 回调函数(留给使用者实现) * @param responseContentType 响应内容的类型，支持3种类型："TEXT","XML","JSON", 没有时自动判断 * @param xmlHttp XMLHttpRequest对象 * @return */function callbackAjax(responseFunction, responseContentType, xmlHttp) {// 判断对象的状态是否交互完成if (xmlHttp.readyState == 4) {// 判断http的交互是否成功if (xmlHttp.status == 200) {if (responseContentType == "XML") {var responseXml = xmlHttp.responseXML;responseFunction(responseXml);} else {var responseText = xmlHttp.responseText;if (responseContentType == "JSON") {var responseJson = eval("(" + responseText + ")");responseFunction(responseJson);} else if(responseContentType == "TEXT") {responseFunction(responseText);} else {//没有responseContentType参数的情况if(responseText.indexOf("<")==0) {var responseXml = xmlHttp.responseXML;responseFunction(responseXml);} else if(responseText.indexOf("{")==0 || responseText.indexOf("[")==0) {var responseJson = eval("(" + responseText + ")");responseFunction(responseJson);} else {responseFunction(responseText);}}}}}}?
?
?