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