rico 範(fàn)例：旅遊網(wǎng)站

rico 的 ajax 實(shí)作是以一個(gè) ajaxEngine 物件為核心, 任何 ajax 的動(dòng)作都是透過這個(gè)物件來完成, 事實(shí)上, 它的觀念也非常簡單, 非常適合初次使用 ajax 的人學(xué)習(xí)。在這個(gè)小節(jié)中, 筆者將透過簡單的範(fàn)例來介紹 rico ajax 的使用。

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

整個(gè) HTML 檔案主要是由一個(gè) select box 和一個(gè) <DIV> 標(biāo)籤所構(gòu)成, 當(dāng)使用者選取了 select box 中任一個(gè)地名時(shí), 右手邊的 <DIV> 區(qū)塊便會(huì)被置換成相對應(yīng)的地區(qū)介紹, 當(dāng)然這些介紹文字都是經(jīng)由 AJAX 向伺服器要來的。

執(zhí)行結(jié)果

程式說明

這個(gè)範(fàn)例的流程圖如右:

?

這個(gè)範(fàn)例看起來簡單多了, 這也是我們?yōu)槭颤N要使用 Framework 的目的之一, 重複利用別人的成果, 可以為自己解省力氣, 並專注在開發(fā)更精緻的產(chǎn)品上。

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

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

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

因?yàn)槲覀兛梢詫?ajaxEngine 註冊好幾個(gè) AJAX 需求, 為了區(qū)別不同的需求, 便需要一個(gè) ID 來辨識, rico 是以一個(gè)字串 ID 來為每個(gè) AJAX 需求作辨認(rèn), 所以不管你呼叫 registerRequest() 以及 sendRequest() 時(shí)都要指定這個(gè) ID, 讓 rico 可以知道你要做的是那個(gè) AJAX 動(dòng)作, 在我們第一個(gè)範(fàn)例中, 就是以 AID_LOCQUERY 作為這個(gè) ID 字串。又例如以下程式碼便是我們註冊了好幾個(gè) AJAX 需求, 且個(gè)別去執(zhí)行動(dòng)作。

利用 rico 開發(fā) AJAX 有個(gè)限制, 也就是你必須給它適當(dāng)格式的 XML 文件, 底下便是我們給第一個(gè)範(fàn)例的 XML 文件：

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

在每個(gè) <response> 的標(biāo)籤中, 你必須描述這個(gè)回應(yīng)的屬性和辨識 ID, 屬性可以是 element 或者是 object, 端看你向 ajaxEngine 註冊的是 element 或者是 object 而定, 例如在第一個(gè)範(fàn)例中, 我們註冊了一個(gè) element, 它的 ID 是 descField：

不過, 在你的 HTML 文件中, 你所註冊的 ID 必須要有相對應(yīng)的 <DIV> 區(qū)塊, 因?yàn)楫?dāng) ajaxEngine 收到伺服器的回應(yīng)後, 會(huì)對這個(gè) <DIV> 區(qū)塊做替換的工作, 例如, 在第一個(gè)範(fàn)例中, ajaxEngine 會(huì)將 <response> </response> 中所夾帶的 HTML 內(nèi)容替換到 <DIV id="descField"> </DIV> 中, 因此在瀏覽器上, 我們就可以看到資料的呈現(xiàn)。

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

為了用 JavaScript 對服務(wù)器發(fā)送 HTTP 要求，你必須先以相關(guān)的類別（class）制出實(shí)體（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 瀏覽器在服務(wù)器送回的數(shù)據(jù)未含 XML mime-type 文件頭（header）時(shí)會(huì)出錯(cuò)。為了避免這個(gè)問題，你可以用下列方法覆寫服務(wù)器傳回的檔頭，以免傳回的不是text/xml。

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

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

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

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

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

?

不過如果你想要以 POST 方式傳送數(shù)據(jù)，則必須先將 MIME 型態(tài)改好，如下：

				

						

						
						

						http_request.setRequestHeader('Content
						

						-
						

						Type',?'application
						

						/
						

						x
						

						-
						

						www
						

						-
						

						form
						

						-
						

						urlencoded');


						

				
				

				

				

				
						

				
				

		

否則服務(wù)器就不會(huì)理你傳過來的數(shù)據(jù)了。

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

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

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

//但是，F(xiàn)ireFox 對onreadyStateChange沒有反應(yīng)，怎么辦，這個(gè)方法不能用在

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

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

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

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

readyState 所有可能的值如下：

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

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

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

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

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

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

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

< 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」
• 這么一來就會(huì)呼叫
  ???? makeRequest() 函式，亦傳入?yún)?shù)值 test.html (也就是那份 HTML 檔的名稱，放在同目錄下)
• 接著發(fā)出 request，而后會(huì)將主導(dǎo)權(quán)交給
  ???? onreadystatechange 指定的 alertContents() 函式
• alertContents() 檢查響應(yīng)是否正常，而后以 alert() 將 test.html 的內(nèi)容列出

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

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

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

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

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

...

				

						

						
						

						onclick
						

						=
						

						"
						

						makeRequest('test.xml')
						

						"
						

				
				

				
						

				
				

		

...

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