快捷導(dǎo)航

ajaxrequest.js ajaxrequest 0.7最新版使用AJAXRequest進行AJAX應(yīng)用程序開發(fā)入門小技巧

更新時間：2007年12月15日 15:11:06 作者：

使用AJAXRequest進行AJAX應(yīng)用程序開發(fā)(1) - 初識AJAXRequest
前言
在發(fā)布了AJAXRequest類的幾個版本之后，漸漸地有許多朋友用上了它，也有許多朋友問我有沒有更詳細的說明和示例。不過因為時間的問題以及我能想到的示例有限，一直沒有多寫幾個示例。考慮了一下，決定寫一個關(guān)于AJAXRequest的教程，希望對使用AJAXRequest類的朋友們有所幫助。

準備

在使用AJAXRequest進行AJAX開發(fā)之前，你需要做以下準備：

準備知識：JavaScript基本語法，文檔對象模型(DOM)的相關(guān)知識，以及至少掌握一種后臺編程的語言（我寫的例子以ASP為編程語言）。

準備工具：EditPlus或者其他文本編輯器（Dreamweaver或者Visual Web Developer也可以），以及本地測試用的Web服務(wù)器（IIS或者Apache或者NetBox或其他都可以）。

下載AJAXRequest類：你可以在http://www.xujiwei.cn/works/ajaxrequest/下載到最新版的AJAXRequest類。

要進行AJAX開發(fā)，你需要了解JS編程，這是AJAX中J的需要，以及后臺編程，這是需要在服務(wù)端進行動態(tài)處理，DOM用來處理信息，將結(jié)果呈現(xiàn)給用戶。而工具方面，文本編輯器可以選擇你自己喜歡的，我比較喜歡用EditPlus。

至于測試用的Web服務(wù)器，就取決于你所用的后臺編程語言了，如ASP或ASP.NET是IIS，PHP可以選擇Apache等。運行ASP的另外一個選擇是NetBox，不過NetBox對UTF-8支持不太好，如果不涉及非英文的輸出，可以考慮選擇這個輕量級的服務(wù)器軟件。

至于為什么要在本地建立測試服務(wù)器而不是直接在瀏覽器中運行，是因為從一開始就在與服務(wù)器相近的環(huán)境中開發(fā)，可以在以后的開發(fā)過程中減少許多莫名的錯誤。

開始

在之后教程的例子中，我都將以JS代碼與XHTML代碼分開的方式來書寫，其中AJAXRequest類文件ajaxrequest.js放在例子代碼的同一目錄下。

Hello,World!

按照慣例，以一個“Hello,World!”來開始。

helloworld.htm

程序代碼：

復(fù)制代碼代碼如下:

<!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>  
    <!-- 一個按鈕，單擊調(diào)用函數(shù)showHello，顯示歡迎信息 -->  
    <button onclick="showHello();">顯示Hello,World!</button>  
  </body>  
</html> 

在helloworld.htm中，我們在頁面上放置了一個button，用于觸發(fā)showHello函數(shù)，顯示從服務(wù)端獲取的信息。

helloworld.js

程序代碼：

復(fù)制代碼代碼如下:

// 創(chuàng)建AJAXRequest對象，以全局變量的方式來保存這個對象，這樣在整個頁面應(yīng)用程序中就只需要創(chuàng)建一次AJAXRequest類對象，而不用重復(fù)創(chuàng)建。  
var ajax=new AJAXRequest();  
/////////////////////////////////////////  
// showHello  
// 描述：向服務(wù)端發(fā)送請求并顯示返回信息  
// 參數(shù)：無  
// 返回：無  
/////////////////////////////////////////  
function showHello() {  
  // 使用get方法向服務(wù)端獲取文件helloworld.txt的內(nèi)容，  
  // 并在函數(shù)mycallback中進行處理  
  ajax.get("helloworld.txt",mycallback);  
}  
/////////////////////////////////////////  
// mycallback  
// 描述：向服務(wù)端發(fā)送請求并顯示返回信息  
// 參數(shù)：obj - XMLHttpRequest對象，保存服務(wù)端返回信息  
// 返回：無  
/////////////////////////////////////////  
function mycallback(obj) {  
  // 用alert來顯示服務(wù)端返回的內(nèi)容  
  // obj.responseText為helloworld.txt的內(nèi)容  
  alert(obj.responseText);  
} 

在helloworld.js中，創(chuàng)建了一個全局變量ajax，用于保存一個AJAXRequest對象，如果在有多個函數(shù)需要用到AJAXRequest時，就不需要重新創(chuàng)建AJAXRequest類實例，只需要直接使用ajax就行了。因為AJAXRequest類中具有連接池的特性，因此不會出現(xiàn)在網(wǎng)絡(luò)延遲較大時后來的請求覆蓋前面的請求的情況。

helloworld.txt

程序代碼：
Hello,World!

helloworld.txt為客戶端需要的內(nèi)容，歡迎信息“Hello,World!”。

小結(jié)

在上面的教程中，我們寫了一個小小的AJAX應(yīng)用程序，用于在客戶端用AJAXRequest類從服務(wù)端獲取一個文本文件，并將它的內(nèi)容顯示出來?？梢钥闯鰜恚谏厦娴某绦蛑?，我們只是很簡單的用了AJAXRequest的get方法，就完成了從服務(wù)器獲取文件內(nèi)容的過程。

在接下來的教程中，我們將繼續(xù)學(xué)習(xí)AJAXRequest類的使用。

to be continued ...

您可能感興趣的文章: