使用AJAXRequest進行AJAX應用程式開發(1) - 初識AJAXRequest
前言
在發布了AJAXRequest類的幾個版本之後，漸漸地有許多朋友用上了它，也有許多朋友問我有沒有更詳細的說明和樣本。不過因為時間的問題以及我能想到的樣本有限，一直沒有多寫幾個樣本。考慮了一下，決定寫一個關於AJAXRequest的教程，希望對使用AJAXRequest類的朋友們有所協助。
準備
在使用AJAXRequest進行AJAX開發之前，你需要做以下準備：
準備知識：JavaScript基本文法，文件物件模型(DOM)的相關知識，以及至少掌握一種後台編程的語言（我寫的例子以ASP為程式設計語言）。
準備工具：EditPlus或者其他文字編輯器（Dreamweaver或者Visual Web Developer也可以），以及本地測試用的Web伺服器（IIS或者Apache或者NetBox或其他都可以）。
下載AJAXRequest類：你可以在http://www.xujiwei.cn/works/ajaxrequest/下載到最新版的AJAXRequest類。
要進行AJAX開發，你需要瞭解JS編程，這是AJAX中J的需要，以及後台編程，這是需要在服務端進行動態處理，DOM用來處理資訊，將結果呈現給使用者。而工具方面，文字編輯器可以選擇你自己喜歡的，我比較喜歡用EditPlus。
至於測試用的Web伺服器，就取決於你所用的後台程式設計語言了，如ASP或ASP.NET是IIS，PHP可以選擇Apache等。運行ASP的另外一個選擇是NetBox，不過NetBox對UTF-8支援不太好，如果不涉及非英文的輸出，可以考慮選擇這個輕量級的伺服器軟體。
至於為什麼要在本地建立測試伺服器而不是直接在瀏覽器中運行，是因為從一開始就在與伺服器相近的環境中開發，可以在以後的開發過程中減少許多莫名的錯誤。
開始
在之後教程的例子中，我都將以JS代碼與XHTML代碼分開的方式來書寫，其中AJAXRequest類檔案ajaxrequest.js放在例子代碼的同一目錄下。
Hello,World!
按照慣例，以一個“Hello,World!”來開始。
helloworld.htm
程式碼：
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="xujiwei" />
<meta name="copyright" content="www.xujiwei.cn" />
<meta name="description" content="hello,world" />
<title>Hello,World!</title>
<!-- 包含AJAXRequest類檔案 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 包含頁面需要的JS代碼 -->
<script type="text/javascript" src="helloworld.js"></script>
</head>
<body>
<!-- 一個按鈕，單擊調用函數showHello，顯示歡迎資訊 -->
<button onclick="showHello();">顯示Hello,World!</button>
</body>
</html>
在helloworld.htm中，我們在頁面上放置了一個button，用於觸發showHello函數，顯示從服務端擷取的資訊。
helloworld.js
程式碼：
複製代碼 代碼如下:
// 建立AJAXRequest對象，以全域變數的方式來儲存這個對象，這樣在整個頁面應用程式中就只需要建立一次AJAXRequest類對象，而不用重複建立。
var ajax=new AJAXRequest();
/////////////////////////////////////////
// showHello
// 描述：向服務端發送請求並顯示返回資訊
// 參數：無
// 返回：無
/////////////////////////////////////////
function showHello() {
// 使用get方法向服務端擷取檔案helloworld.txt的內容，
// 並在函數mycallback中進行處理
ajax.get("helloworld.txt",mycallback);
}
/////////////////////////////////////////
// mycallback
// 描述：向服務端發送請求並顯示返回資訊
// 參數：obj - XMLHttpRequest對象，儲存服務端返回資訊
// 返回：無
/////////////////////////////////////////
function mycallback(obj) {
// 用alert來顯示服務端返回的內容
// obj.responseText為helloworld.txt的內容
alert(obj.responseText);
}
在helloworld.js中，建立了一個全域變數ajax，用於儲存一個AJAXRequest對象，如果在有多個函數需要用到AJAXRequest時，就不需要重新建立AJAXRequest類執行個體，只需要直接使用ajax就行了。因為AJAXRequest類中具有串連池的特性，因此不會出現在網路延遲較大時後來的請求覆蓋前面的請求的情況。
helloworld.txt
程式碼：
Hello,World!
helloworld.txt為用戶端需要的內容，歡迎資訊“Hello,World!”。
小結
在上面的教程中，我們寫了一個小小的AJAX應用程式，用於在用戶端用AJAXRequest類從服務端擷取一個文字檔，並將它的內容顯示出來。可以看出來，在上面的程式中，我們只是很簡單的用了AJAXRequest的get方法，就完成了從伺服器擷取檔案內容的過程。
在接下來的教程中，我們將繼續學習AJAXRequest類的使用。
to be continued ...
