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