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); 改成这样：