rico 範例：旅遊網站

rico 的 ajax 實作是以一個 ajaxEngine 物件為核心, 任何 ajax 的動作都是透過這個物件來完成, 事實上, 它的觀念也非常簡單, 非常適合初次使用 ajax 的人學習。在這個小節中, 筆者將透過簡單的範例來介紹 rico ajax 的使用。

我們設計了一個「臺灣走透透 — 縣市情報通」的網站, 主要功能是提供使用者查詢臺灣各縣市資訊及小吃特產等資訊, 類似旅遊資訊之類的情報站。但是如果我們只是單純將各個縣市的情報寫成 HTML 檔案, 然後讓使用者點選超連結瀏覽, 這樣就不符合前面章節所提的非同步通訊的好處, 所以在這裡我們就改變設計, 讓使用者選擇想要瀏覽的縣市之後, 立刻出現該縣市相關資訊, 當然在這裡我們是要學習 AJAX, 所以這個範例就是利用 AJAX 來完成這樣的動作。

整個 HTML 檔案主要是由一個 select box 和一個 <DIV> 標籤所構成, 當使用者選取了 select box 中任一個地名時, 右手邊的 <DIV> 區塊便會被置換成相對應的地區介紹, 當然這些介紹文字都是經由 AJAX 向伺服器要來的。

執行結果

程式說明

這個範例的流程圖如右:

?

這個範例看起來簡單多了, 這也是我們為什麼要使用 Framework 的目的之一, 重複利用別人的成果, 可以為自己解省力氣, 並專注在開發更精緻的產品上。

在範例一開始, 我們首先要載入兩個 JavaScript 程式庫, 一個是前面所介紹的 prototype.js, 而一個是 rico.js, 因為 rico.js 實際上是植基於 prototype.js 上, 所以在使用 rico 之前, 務必要先載入 prototype.js, 而且要使用對的版本, 例如在筆者撰寫本章節時, rico 最新的版本是 1.1.0, 它所需要的 prototype.js 最低需求是 1.4.0, 所以你如果要使用這個版本, 同樣的也需要一份 prototype.js 1.4.0 的函式庫。

在載入 prototype.js 以及 rico.js 之後, 接下來的 script 區塊便是我們自己的程式碼了, 在這個範例中, 筆者只用了短短兩個函式, 第一個函式 init() 是用來在頁面被載入的同時做初始化, 另外一個函式 queryLocDesc() , 是當使用者選擇了 select box 中不同的選項時, 做出對應的動作, 所以我們必須在 select box 的 onchange 事件被觸發時去執行這個函式。

前面有提到 rico 的 AJAX 是以 ajaxEngine 為核心, 所以整個頁面不管有幾個 AJAX 需求, 都是要跟這個物件註冊, 在第一個範例中, 我們只有一種 AJAX 需求, 所以我們也只對 ajaxEngine 註冊一個要求, 在 rico 中, 你要完成這個動作就是要呼叫 registerRequest() 函式, 不過註冊的動作並不會觸發 XMLHttpRequest 立刻去執行, 而是必須等到我們呼叫了 sendRequest() 這個函式後, ajaxEngine 才會真正有動作。

因為我們可以對 ajaxEngine 註冊好幾個 AJAX 需求, 為了區別不同的需求, 便需要一個 ID 來辨識, rico 是以一個字串 ID 來為每個 AJAX 需求作辨認, 所以不管你呼叫 registerRequest() 以及 sendRequest() 時都要指定這個 ID, 讓 rico 可以知道你要做的是那個 AJAX 動作, 在我們第一個範例中, 就是以 AID_LOCQUERY 作為這個 ID 字串。又例如以下程式碼便是我們註冊了好幾個 AJAX 需求, 且個別去執行動作。

利用 rico 開發 AJAX 有個限制, 也就是你必須給它適當格式的 XML 文件, 底下便是我們給第一個範例的 XML 文件：

在每個給 rico ajaxEngine 的 XML 文件中, 必須是由 <ajax-response> </ajax-response> 所包裝起來, 而在這個區塊中, 你又必須將你真正的資料包裝在 <response> </response> 區塊中, 不過在同一個 <ajax-response> 區塊中, 可以包含多個 <response> 區塊。

在每個 <response> 的標籤中, 你必須描述這個回應的屬性和辨識 ID, 屬性可以是 element 或者是 object, 端看你向 ajaxEngine 註冊的是 element 或者是 object 而定, 例如在第一個範例中, 我們註冊了一個 element, 它的 ID 是 descField：

不過, 在你的 HTML 文件中, 你所註冊的 ID 必須要有相對應的 <DIV> 區塊, 因為當 ajaxEngine 收到伺服器的回應後, 會對這個 <DIV> 區塊做替換的工作, 例如, 在第一個範例中, ajaxEngine 會將 <response> </response> 中所夾帶的 HTML 內容替換到 <DIV id="descField"> </DIV> 中, 因此在瀏覽器上, 我們就可以看到資料的呈現。

第一步 – 說聲「請」 （又稱為「怎么發出 XMLHttpRequest」）

為了用 JavaScript 對服務器發送 HTTP 要求，你必須先以相關的類別（class）制出實體（instance）。Internet
Explorer 首先以 ActiveX 對象方式提供 XMLHTTP 類別，而 Mozilla、Safari及其它瀏覽器則隨后以 XMLHttpRequest 類別支持此 ActiveX 對象中的類別及屬性。

因此，如果想跨瀏覽器，那么可以這么寫：?

if ?(window.XMLHttpRequest)?{? // ?Mozilla,?Safari,?

????http_request? = ? new ?XMLHttpRequest();

}? else ? if ?(window.ActiveXObject)?{? // ?IE

????http_request? = ? new ?ActiveXObject( " Microsoft.XMLHTTP " );

}

(由于這段程序僅供說明，所以是采最簡方式寫出。本文第三步中有另一種我們比較常用的寫法。)

有些版本的 Mozilla 瀏覽器在服務器送回的數據未含 XML mime-type 文件頭（header）時會出錯。為了避免這個問題，你可以用下列方法覆寫服務器傳回的檔頭，以免傳回的不是text/xml。

接下來是要決定服務器傳回資料后的處理方式，此時你只要以 onreadystatechange 這個屬性指明要處理傳回值的
JavaScript 函式名稱即可，例如：

注意，指定的函式名稱后不加括號也沒有參數。除了指定函式名稱外，你也能用 Javascript 實時定義函式的方法來定一個新的處理函式，如下：

決定處理方式之后你得確實發出 request，此時需叫用 HTTP request 類別的 open() 及 send() 方法，如下：

• open() 的第一個參數是
  ???? HTTP request 的方法，也就是從
  ???? GET、POST、HEAD 中擇一使用，亦可用你主機上支持的方式。為遵循 HTTP 標準，請記得這些方法都是大寫，不然有的瀏覽器（如 Firefox）或許不會理你。其它 HTTP request 可以支持的方法列表請參考
  ???? W3C 規格書 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)。
• 第二個參數是目標 URL。基于安全考慮，你不能叫用同網域以外的網頁。如果網域不同，則叫用
  ???? open() 時會出現「權限不足，拒絕存取」那類的錯誤。通常大伙會犯的錯誤多為在 domain.tld 網的網站下呼叫 www.domain.tld 中的網頁，僅是一點點差別都不行。
  ????
• 第三個參數決定此 request 是否不同步進行，如果設定為
  ???? TRUE 則即使服務器尚未傳回數據也會繼續執行其余的程序，這也就是 AJAX 中第一個 A 代表的意義。

send() 的參數在以 POST 發出 request 時可以是任何想傳給服務器的東西，而數據則以查詢字符串的方式列出，例如：

?

不過如果你想要以 POST 方式傳送數據，則必須先將 MIME 型態改好，如下：

				

						

						
						

						http_request.setRequestHeader('Content
						

						-
						

						Type',?'application
						

						/
						

						x
						

						-
						

						www
						

						-
						

						form
						

						-
						

						urlencoded');


						

				
				

				

				

				
						

				
				

		

否則服務器就不會理你傳過來的數據了。

第二步 – 「就上咩！」（又稱為「處理服務器傳回的數據」）

傳出 request 時必須提供處理傳回值的函式名稱。

////////////////////////////////////////////////////////////////////

//但是，FireFox 對onreadyStateChange沒有反應，怎么辦，這個方法不能用在

//FireFox 中，有沒有其它的方法？

//??????Added by www.besook.com 2006-03-19

//////////////////////////////////////////////////////////////

那么來看看這個函式該做些什么。首先，它必須檢查 request 目前的狀態：如果狀態值為 4 代表服務器已經傳回所有信息了，便可以開始解析所得信息。

readyState 所有可能的值如下：

• 0 (還沒開始)
• 1 (讀取中)
• 2 (已讀取)
• 3 (信息交換中)
• 4 (一切完成)

(資料來源: MSDN (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp))

接下來要檢查服務器傳回的 HTTP 狀態碼。所有狀態碼列表可于 W3C
網站 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)上查到，但我們要管的是200 OK 這種狀態。

檢查傳回的 HTTP 狀態碼后，要怎么處理傳回的數據就由你決定了。有兩種存取數據的方式：

• http_request.responseText – 這樣會把傳回值當字符串用
  ????
• http_request.responseXML – 這樣會把傳回值視為
  ???? XMLDocument 對象，而后可用
  ???? JavaScript DOM 相關函式處理

第三步 - 萬事俱備 - 簡單范例

好，接著就做一次簡單的 HTTP 范例，演示方才的各項技巧。這段 JavaScript 會向服務器要一份里頭有「I'm
a test.」字樣的 HTML 文件(test.html)，而后以 alert() 將文件內容列出。

< script?type = " text/javascript " ?language = " javascript " >

???? var ?http_request? = ? false ;

???? function ?makeRequest(url)?{

????????http_request? = ? false ;

???????? if ?(window.XMLHttpRequest)?{? // ?Mozilla,?Safari,

????????????http_request? = ? new ?XMLHttpRequest();

???????????? if ?(http_request.overrideMimeType)?{

????????????????http_request.overrideMimeType('text / xml');

????????????}

????????}? else ? if ?(window.ActiveXObject)?{? // ?IE

???????????? try ?{

????????????????http_request? = ? new ?ActiveXObject( " Msxml2.XMLHTTP " );

????????????}? catch ?(e)?{

???????????????? try ?{

????????????????????http_request? = ? new ?ActiveXObject( " Microsoft.XMLHTTP " );

????????????????}? catch ?(e)?{}

????????????}

????????}

???????? if ?( ! http_request)?{

????????????alert('Giving?up?:(?Cannot?create?an?XMLHTTP?instance');

???????????? return ? false ;

????????}

????????http_request.onreadystatechange? = ?alertContents;

????????http_request.open('GET',?url,? true );

????????http_request.send( null );

????}

???? function ?alertContents()?{

???????? if ?(http_request.readyState? == ? 4 )?{

???????????? if ?(http_request.status? == ? 200 )?{

????????????????alert(http_request.responseText);

????????????}? else ?{

????????????????alert('There?was?a?problem? with ?the?request.');

????????????}

????????}

????}

</ script >

< span

????style = " cursor:?pointer;?text-decoration:?underline "

????onclick = " makeRequest('test.html') " >

????????Make?a?request

</ span >

在此范例中：

• 首先使用者按下「Make a request」
• 這么一來就會呼叫
  ???? makeRequest() 函式，亦傳入參數值 test.html (也就是那份 HTML 檔的名稱，放在同目錄下)
• 接著發出 request，而后會將主導權交給
  ???? onreadystatechange 指定的 alertContents() 函式
• alertContents() 檢查響應是否正常，而后以 alert() 將 test.html 的內容列出

你可以由此測試本例 (http://www.w3clubs.com/mozdev/httprequest_test.html)，也可以參考測試檔案 (http://www.w3clubs.com/mozdev/test.html)。

第四步 – 「X 檔案」（又稱為「處理 XML 響應值」）

前面的例子中，在收到 HTTP 傳回值后我們以對象的 reponseText 屬性使用 test.html 檔案的內容，接著來試試 responseXML 屬性的方法。

首先，我們得做個格式正確的 XML 文件，以便稍后取用。此檔名喚 test.xml，內容如下：

在程序中，我們叫用檔案的地方只須略事修改如下：

...

				

						

						
						

						onclick
						

						=
						

						"
						

						makeRequest('test.xml')
						

						"
						

				
				

				
						

				
				

		

...

接著在 alertContents() 中，我們必須將 alert(http_request.responseText); 改成這樣：