一個(gè)比較方便通用的自定義Ajax函數(shù)
function Ajax()
{
var len=arguments.length;
var type,url,postdata,fn;
if(len<2)
{
alert('沒(méi)有2個(gè)一下參數(shù)的重載,至少必須指定請(qǐng)求類型(type)和url地址!');
return;
}
type=arguments[0];
url=arguments[1];
if(len>2)
{
var args=arguments[2];
if(typeof(args)=="string")
{
postdata=args;
}
}
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open(type,url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
fn = arguments[len-1];
xhr.onreadystatechange = function (){
if(xhr.readyState==4)
{
if(xhr.status==200)
{
if(typeof(fn)=="function")
fn(xhr.responseText);
}
else
{
alert("你所請(qǐng)求的頁(yè)面有異常");
}
}
};
xhr.send(postdata);
}
function Test()
{
Ajax("get","/WebRoot/servlet/TestAjax");
Ajax("get","/WebRoot/servlet/TestAjax",function (date){
alert("Get Date:\n"+date);
});
Ajax("post","/WebRoot/servlet/TestAjax");
Ajax("post","/WebRoot/servlet/TestAjax",function (date){
alert("Post Date:\n"+date);
});
Ajax("post","/WebRoot/servlet/TestAjax","username=jonllen&pwd=123456",function (date){
alert("Post Date:\n"+date);
});
}function Ajax()
{
var len=arguments.length;
var type,url,postdata,fn;
if(len<2)
{
alert('沒(méi)有2個(gè)一下參數(shù)的重載,至少必須指定請(qǐng)求類型(type)和url地址!');
return;
}
type=arguments[0];
url=arguments[1];
if(len>2)
{
var args=arguments[2];
if(typeof(args)=="string")
{
postdata=args;
}
}
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open(type,url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
fn = arguments[len-1];
xhr.onreadystatechange = function (){
if(xhr.readyState==4)
{
if(xhr.status==200)
{
if(typeof(fn)=="function")
fn(xhr.responseText);
}
else
{
alert("你所請(qǐng)求的頁(yè)面有異常");
}
}
};
xhr.send(postdata);
}function Test()
{
Ajax("get","/WebRoot/servlet/TestAjax");
Ajax("get","/WebRoot/servlet/TestAjax",function (date){
alert("Get Date:\n"+date);
});
Ajax("post","/WebRoot/servlet/TestAjax");
Ajax("post","/WebRoot/servlet/TestAjax",function (date){
alert("Post Date:\n"+date);
});
Ajax("post","/WebRoot/servlet/TestAjax","username=jonllen&pwd=123456",function (date){
alert("Post Date:\n"+date);
});
}
就只有一個(gè)函數(shù)Ajax,調(diào)用的例子是Test(),由于JavaScript的函數(shù)申明不需要固定參數(shù),能實(shí)現(xiàn)動(dòng)態(tài)獲取傳遞,利用這點(diǎn)我們能實(shí)現(xiàn)類似與C#或Java里面的重載,并且我們能根據(jù)傳入?yún)?shù)的類型和數(shù)量進(jìn)行特別的判斷,而執(zhí)行不同的操作。上述Ajax函數(shù)里就用到判斷當(dāng)***一個(gè)傳入的參數(shù)是函數(shù)類型的時(shí)候我們就認(rèn)為是這個(gè)是Ajax回調(diào)函數(shù),如果是字符串類型的話就認(rèn)為是postData,這樣我們就能實(shí)現(xiàn)動(dòng)態(tài)傳遞可選參數(shù),也就是說(shuō)你可以加上function(data){alert(date);}就會(huì)自動(dòng)在Ajax加載返回的回調(diào)該函數(shù),如果沒(méi)有就不調(diào)用。
在JQuery里面,我們大多會(huì)用到對(duì)象的prototype屬性,并也可實(shí)現(xiàn)可選參數(shù)默認(rèn)構(gòu)造函數(shù)來(lái)實(shí)例對(duì)象,形如:
var Ajax = { |
Java代碼
$.ajax({ |
不過(guò)我對(duì)整個(gè)JQuery框架的源碼還有一些疑問(wèn),當(dāng)我想自己來(lái)實(shí)現(xiàn)像JQuery這樣來(lái)調(diào)用的Ajax請(qǐng)求函數(shù)的時(shí)候遇到了一些問(wèn)題,我想在對(duì)象構(gòu)造函數(shù)里面再加上一層構(gòu)造函數(shù)缺省值,卻獲得不了構(gòu)造函數(shù)參數(shù)的值,調(diào)用不報(bào)什么錯(cuò)誤,就是獲取到的值都是undefinde,可能是我還未了解JavaScrit里面一些更深?yuàn)W的東西吧。。。^_^
上面我寫(xiě)的Ajax函數(shù)也能動(dòng)態(tài)判斷指定參數(shù)的功能,實(shí)現(xiàn)很簡(jiǎn)單就是根據(jù)傳入的arguments數(shù)量和類型來(lái)判斷的,所以我們?cè)谡{(diào)用的時(shí)候能像在Test里面有多種參數(shù)調(diào)用的方式,方便實(shí)用。當(dāng)我們不需要用到整個(gè)JQuery框架或只要用Ajax的時(shí)候就嵌入這一段函數(shù)就有了,更重要的是自己寫(xiě)的不會(huì)造成跟其他的產(chǎn)生沖突。
以上我寫(xiě)的Ajax的函數(shù)在IE6、FF2.0、Chrome內(nèi)測(cè)試都正常,請(qǐng)求的服務(wù)器端是Servlet,都能正常的返回結(jié)果。注意:當(dāng)post過(guò)去有中文的時(shí)候postData數(shù)據(jù)***先單個(gè)針對(duì)中文進(jìn)行encodeURI(postData)URL編碼,Ajax請(qǐng)求post的時(shí)候都是以UTF-8編碼格式發(fā)送的,確保服務(wù)器端和客戶端編碼一致,這樣就不會(huì)出現(xiàn)中文亂碼問(wèn)題。
【編輯推薦】