DIV CSS 佈局教程網

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 = {    
url : location.href,   
type : "post",   
send : function ()   
{   
alert (this.type);   
}   
};   
AJax.send();   
alert( AJax.url );  

var AJax = { 
url : location.href,
type : "post",
send : function ()
{
alert (this.type);
}
};
AJax.send();
alert( Ajax.url );    於是，JQuery便能這樣調用AJax：

Java代碼

$.AJax({   
type: "GET",   
url: "test.JS",   
dataType: "script"  
});   

$.AJax({
type: "GET",
url: "test.JS",
dataType: "script"
}); 

不過我對整個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編碼格式發送的，確保服務器端和客戶端編碼一致，這樣就不會出現中文亂碼問題。