每次實現ajax回調的時候，都需要獲得一個xmlhttprequest對象，然後寫回呼函數，回呼函數中判斷readystate和status，很是繁瑣，於是自己想到些一個API來包含ajax要實現的東西，調用的時候只需要向API中傳入參數就可以了，非常簡單。
雖然網路上有很多開源的ajaxrequest對象，包括jquery，prototype，extjs等，但是寫一個自己符合自己用的對象可以按照自己習慣的方式調用，個人覺得非常之好，這樣一來也加深了自己對ajax機制的理解，所以建議還是自己動手寫為好。。。。一、動手寫自己的對象ajax,儲存檔案為myajax.js,作為一個類庫//JScript檔案
//ajax請求功能函數
//作者：吳寶佑
//get調用方式：(1)執行個體化 var aj=new ajax(); (2)調用get函數 aj.get(url,callback) (3)寫回呼函數 function callback(xhr){xhr.responsetext}
//post調用方式：(1)執行個體化 var aj=new ajax(); (2)調用post函數 aj.post(url,content,callback) (3)寫回呼函數 function callback(xhr){xhr.responsetext}
function ajax()//ajax對象
{
function getXHR()//擷取xmlhttprequest對象
{
var request=false;
try
{
request = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
request = false;
}
}
}
return request;
}
this.get = function (openUrl,successFun)//ajax對象的get方法,通過get方式發送請求,openUrl為請求的頁面,successFun為成功回調執行的函數
{
var request = getXHR();
request.open("get",openUrl,true);
// request.onreadystatechange = function ()
// {
// if (request.readystate==4)
// {
// if (request.status==200)
// {
// successFun(request);
// }
// }
// };
request.onreadystatechange = update;
function update()
{
if (request.readystate==4)
{
if (request.status==200)
{
successFun(request);
}
}
}
request.send(null);
}
this.post = function (openUrl,sendContent,successFun)//ajax對象的post方法,通過post方式發送請求,openUrl為請求的頁面,successFun為成功回調執行的函數
{
var request = getXHR();
request.open("post",openUrl,true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告訴伺服器發送的是文本
request.onreadystatechange = update;
function update()
{
if (request.readystate==4)
{
if (request.status==200)
{
successFun(request);
}
}
}
request.send(sendContent);
}
}二、調用類庫myajax.js1，建立一html文檔，body標籤代碼如下<body>
<input type ="text" id ="txt1" />
<input type ="button" id ="btn1" value ="get按鈕" onclick ="callback_get()" />
<input type ="text" id ="txt2" />
<input type ="button" id ="btn2" value ="post按鈕" onclick ="callback_post()" />
</body>2，js檔案如下 <script type ="text/javascript" src ="myajax.js" ></script><!--引入類庫所在的js檔案-->
<script type ="text/javascript" >
function callback_get()//實現get方式回調
{
var aj=new ajax();//執行個體化對象
var txtVal=document.getElementById ("txt1").value ;//擷取文本值
var url="aj.aspx?arg="+escape(txtVal);//傳遞資料到指定的url
aj.get(url,update);//調用類庫中的get函數,表示開啟的是url,回呼函數為update
function update(obj)//回呼函數的實現,這裡obj值的其實就是一個xmlhttprequest對象,這點可以從類庫中看出來。可以把obj該為任何名字的參數,如aaa
{
alert(obj.responsetext);
}
}
function callback_post()//實現post方式回調
{
var aj=new ajax();
var txtVal=document.getElementById("txt2").value;
var sendCont="argument="+txtVal;
var url="aj.aspx?time="+new Date(); //這裡是post裡的習慣寫法,最好傳遞給伺服器一個時間戳記,以免回調的資料為緩衝在伺服器中的資料
aj.post(url,sendCont,update);//調用類庫中的post函數,表示開啟的是url,傳遞的內容為sendCont,回呼函數為update
function update(obj)//回呼函數的實現,同get方式
{
alert(obj.responsetext);
}
}
</script>3，通過編譯，能正確調用，說明實現了簡單的ajax類庫
