一個比較方便通用的自定義Ajax函數(shù)
function Ajax()
{
var len=arguments.length;
var type,url,postdata,fn;
if(len<2)
{
alert('沒有2個一下參數(shù)的重載,至少必須指定請求類型(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("你所請求的頁面有異常");
}
}
};
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('沒有2個一下參數(shù)的重載,至少必須指定請求類型(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("你所請求的頁面有異常");
}
}
};
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);
});
}
就只有一個函數(shù)Ajax，調(diào)用的例子是Test()，由于JavaScript的函數(shù)申明不需要固定參數(shù)，能實(shí)現(xiàn)動態(tài)獲取傳遞，利用這點(diǎn)我們能實(shí)現(xiàn)類似與C#或Java里面的重載，并且我們能根據(jù)傳入?yún)?shù)的類型和數(shù)量進(jìn)行特別的判斷，而執(zhí)行不同的操作。上述Ajax函數(shù)里就用到判斷當(dāng)***一個傳入的參數(shù)是函數(shù)類型的時候我們就認(rèn)為是這個是Ajax回調(diào)函數(shù)，如果是字符串類型的話就認(rèn)為是postData，這樣我們就能實(shí)現(xiàn)動態(tài)傳遞可選參數(shù)，也就是說你可以加上function(data){alert(date);}就會自動在Ajax加載返回的回調(diào)該函數(shù)，如果沒有就不調(diào)用。
在JQuery里面，我們大多會用到對象的prototype屬性，并也可實(shí)現(xiàn)可選參數(shù)默認(rèn)構(gòu)造函數(shù)來實(shí)例對象，形如：
var Ajax = { |
Java代碼
$.ajax({ |
不過我對整個JQuery框架的源碼還有一些疑問，當(dāng)我想自己來實(shí)現(xiàn)像JQuery這樣來調(diào)用的Ajax請求函數(shù)的時候遇到了一些問題，我想在對象構(gòu)造函數(shù)里面再加上一層構(gòu)造函數(shù)缺省值，卻獲得不了構(gòu)造函數(shù)參數(shù)的值，調(diào)用不報(bào)什么錯誤，就是獲取到的值都是undefinde，可能是我還未了解JavaScrit里面一些更深奧的東西吧。。。^_^
上面我寫的Ajax函數(shù)也能動態(tài)判斷指定參數(shù)的功能，實(shí)現(xiàn)很簡單就是根據(jù)傳入的arguments數(shù)量和類型來判斷的，所以我們在調(diào)用的時候能像在Test里面有多種參數(shù)調(diào)用的方式，方便實(shí)用。當(dāng)我們不需要用到整個JQuery框架或只要用Ajax的時候就嵌入這一段函數(shù)就有了，更重要的是自己寫的不會造成跟其他的產(chǎn)生沖突。
以上我寫的Ajax的函數(shù)在IE6、FF2.0、Chrome內(nèi)測試都正常，請求的服務(wù)器端是Servlet，都能正常的返回結(jié)果。注意：當(dāng)post過去有中文的時候postData數(shù)據(jù)***先單個針對中文進(jìn)行encodeURI(postData)URL編碼，Ajax請求post的時候都是以UTF-8編碼格式發(fā)送的，確保服務(wù)器端和客戶端編碼一致，這樣就不會出現(xiàn)中文亂碼問題。
【編輯推薦】
