prototype.js輕量級WEB開發的首選ajax架構（三）

本文主要講如何使用prototype.js中的Ajax進行一些小應用方面的開發，不講Ajax原理。

在prototype.js中我以後會用到的有兩個Ajax類，一個是Ajax.Request 別一個是Ajax.Updater。AjaxRequest繼承自Ajax.Base。而Ajax.Updater繼承自Ajax.Request ，說這些沒有別的意思，主要是想讓讀者明白，隨著繼承的延續，類的功能也將特殊化。

我是個粗人不過講那麼多道理，就舉個例子開始吧。哦，差點忘了說一件事，Ajax在普通瀏覽器如XP下是預設不能跨域請求，而在2003下不加入可信網站是不可使用的。所以有些應用不能一味地使用Ajax實現，不然呵呵，記得給自己留後路，像Gmail，它預設使用Ajax實現，但如果系統不能執行Ajax的話就提示使用者可以使用普通HTML實現。還有所謂跨域就是如我的網域名稱是www.LvJiyong.com 我可以使用Ajax請求www.LvJiyong.com 的所有允許訪問的資源，而假如我想訪問www.1818city.com 網域名稱下的資源總管將會拒絕，有些人想用Ajax實現檔案上傳，可行性就更誇張，必須把安全層級降到最低才行。另：在本地測試時是允許訪問任何域下的資源的，不要企圖在網站上直接使用Ajax取得其它網站下的資料，在ASP裡我們可以使用服務端的XMLHTTP實現，而在.NET下允許的方法更多，在此不說了，又開始廢話。

好，現在開始舉例，先講一下特殊中的特殊Ajax.Updater。不知道讀者有沒有嘗試註冊本BLOG的會員，驗證碼就是使用Ajax.Updater去實現的，在頁面載入的時候註冊一個事件來監視驗證碼輸入框的變化，當輸入的長符符合驗證碼長度時，自動觸發向Ajax.Updater驗證驗證碼的頁面發出請求，系統如果檢測驗證碼錯誤，則返回“驗證碼錯誤”，否則返回空值，表示正確。而Ajax.Updater的應用靈巧的就是在這種情況下的使用（只需要顯示傳回值的情況）。

<script>
function getHTML()
{
var url = 'http://www.lvjiyong.com/1818city/Default.aspx';
var pars = 'test=lvjiyong.com';

 var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'get',
parameters: pars
});

/*

使用GET方法主要是傳遞少數的參數，記住只適合傳送少量的參數傳下參數，在'http://www.lvjiyong.com/1818city/Default.aspx'是沒有對參數進行處理的，只是顯示如何傳遞參數

傳遞參數分為Post與GET大家應該都是知道的，當Post時就用Request.Form["參數名"]取值，Get時用Request.QueryString["參數值"]取值。處理回資料後響應請求，響應的常值內容將會自動填滿到ID為placeholder的容器中。

使用Post提交格式如：（主要注意是傳遞Post資料，當然也可以在Post時在url中寫上參數傳遞querystring值。）

var postData = "內容";

var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'post',
postBody:postData});

*/
  
 }
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

預設情況下使用這種方法請求即可，但要再細微點可以多設定參數，這個將在以後使用Ajax.Request時深入說一下。

 

開始胡敲了，先停住吧，最近精神狀態一直不好．明天講一下參數，並說下怎麼實現當Ajax請求發生時出現"Loading...",而成功後自動消失．