自己封装的ajax方法,兼容IE,FireFox,Chrome,Fafari等浏览器。方法内包括http请求发送和返回responose xml接收。
/*
author: linyang
date: 2012-01-30
*/
var myAjax = (function(){
/*
paramObj:{
url: request url,
method: GET or POST,
encode: character
}
return xmlDOMParser
*/
var _send_synchronous = function(paramObj){
var url, method, encode,httpRequest,parser;
url = paramObj.url;
method = paramObj.method;
encode = paramObj.encode;
if(typeof method == 'undefined')
method = 'GET';
if (window.ActiveXObject) {//IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {//FireFox,Chrome,Safari
httpRequest = new XMLHttpRequest();
}
httpRequest.open(method, url, false);
if(typeof encode != 'undefined')
httpRequest.setRequestHeader("Content-Type", "text/html;charset="+encode);
httpRequest.send();
if (window.ActiveXObject) {//IE
parser = new ActiveXObject("Microsoft.XMLDOM");
parser.async = false;
parser.load(httpRequest.responseXML);
} else if (document.implementation.createDocument) {
try {//FireFox
parser = document.implementation.createDocument("", "", null);
parser.async = false;
parser = (new DOMParser()).parseFromString(httpRequest.responseText, "text/xml");
} catch(e) {//Chrome,Safari
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", httpRequest.responseText, false);
xmlhttp.send(null);
parser = xmlhttp.responseXML.documentElement;
}
}
return parser;
}
/*
paramObj:{
url: request url,
method: GET or POST,
encode: character,
param: post param,
isAsync: boolean,
parserHandler: function
}
*/
var _send_ajax = function(paramObj){
var url,method,encode,httpRequest,param,isAsync,parser;
var parserHandler;
url = paramObj.url;
method = paramObj.method.toUpperCase();
encode = paramObj.encode;
if(method=='GET')
param = null;
else if(method=='POST')
param = paramObj.param;
isAsync = paramObj.isAsync;
parserHandler = paramObj.parserHandler;
if (window.ActiveXObject) {//IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {//FireFox,Chrome,Safari
httpRequest = new XMLHttpRequest();
}
httpRequest.onreadystatechange = function(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
if (window.ActiveXObject) {//IE
parser = new ActiveXObject("Microsoft.XMLDOM");
parser.async = false;
parser.load(httpRequest.responseXML);
} else if (document.implementation.createDocument) {
try {//FireFox
parser = document.implementation.createDocument("", "", null);
parser.async = false;
parser = (new DOMParser()).parseFromString(httpRequest.responseText, "text/xml");
} catch(e) {//Chrome,Safari
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", httpRequest.responseText, false);
xmlhttp.send(null);
parser = xmlhttp.responseXML.documentElement;
}
}
parserHandler.apply(parser,[]);
}else{
alert("远程服务调用失败!");
}
}
}
httpRequest.open(method, url, isAsync);
if(typeof encode != 'undefined')
if(method=='GET')
httpRequest.setRequestHeader("Content-Type", "text/html;charset="+encode);
else if(method=='POST')
httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset="+encode);
httpRequest.send(param);
}
return {
sendSynchronize:_send_synchronous,
sendAjax:_send_ajax
}
})();
使用例子:(来源于某网上商店 ^ ^)
myAjax.sendAjax({
url:"PointTransAction.do",
method:'POST',
encode:'GBK',
param:"giftid=" + id + "&time=" + new Date(),
isAsync:true,
parserHandler:function(){
var flag = this.getElementsByTagName('ret')[0].getAttribute('flag');
var msg = this.getElementsByTagName('ret')[0].getAttribute('msg');
if (flag == '0')
//do something
else
alert(msg);
}
});
说明:1,myAjax这个小的JavaScript库对外提供了两个方法:sendSynchronize和sendAjax,但其实sendAjax才是称得上真正的ajax,因为sendSynchronize方法只支持同步,sendAjax可以通过isAsync设置是否使用异步调用。之所以写了sendSynchronize是为了纪念以前在宇宙行那段磕磕绊绊的日子吧。。。
2,parserHandler为传入的回调函数,其中的this关键字是parser的引用。
3,库中的两个方法对xml解析的时候使用的都是同步加载,如果要实现异步加载那么同样需要回调函数:IE下onreadystatechange事件,而FireFox下是onload事件。