日期:2014-05-16 浏览次数:20776 次
记得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")