AJAX 網頁程式設計─rico

paulwong

浏览: 72795 次
性别:
来自: 广州

最近访客更多访客>>

godownget

unwatched

蛋蛋君君

wjyyx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

Ajax prototype JavaScript PHP HTML

rico 是另外一套開放軟體的 JavaScript Framework, 根基於 prototype.js, 但是不僅僅是 prototype.js 的延伸而已, 還創造出一些它獨有的功能, 其中包含以下幾個特色：

1. 支援 AJAX。
2. 支援拖拉式介面。
3. 動畫效果, 如動態改變元件位置大小等。

rico 下載網址：http://openrico.org/rico/home.page

rico 的套用方式也非常簡單, 不過它需要配合 prototype.js, 因此必須在 HTML 文件中同時套用這兩套 Framework, 方法如下。

<head>
<script type="text/javascript" src="script/prototype.js">
</script>
<script type="text/javascript" src="script/rico.js"></script>
</head>

rico 範例：旅遊網站

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

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

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

rico_exam.html
01 <html>
02 <head>
03 <meta http-equiv="Content-Type"
04 content="text/html; charset=UTF-8" />
05 <script type="text/javascript" src="script/prototype.js">
06 </script>
07 <script type="text/javascript" src="script/rico.js">
08 </script>
09
10 <script type="text/javascript">
11 var cur_sel;
12 function init() {
13 cur_sel = '0';
14 document.getElementById('selField').value=cur_sel;
15 // 向 ajaxEngine 註冊一個新的要求 - AID_LOCQUERY
16 【ajaxEngine.registerRequest('AID_LOCQUERY', 'loc.php');】
17 // 向 ajaxEngine 註冊一個新的元件 - descField
18 【ajaxEngine.registerAjaxElement('descField');】
19 }
20
21 function queryLocDesc(sel) {
22 var locName = sel.value;
23 if (locName != '0' && locName != cur_sel) {
24 // 送出 AID_LOCQUERY 的要求，並指定參數
25 【ajaxEngine.sendRequest ('AID_LOCQUERY', 】
26 【'locName='+locName);】
27 cur_sel = locName;
28 }
29 }
30 </script>
31 <title>台灣走透透 — 縣市情報通</title>
32 </head>
33 <body onload="init()">
34
35 <table width="50%" border=0>
36 <tr>
37 <td width="25%" valign="top">
38 請選擇縣市情報：
39 <select id="selField" onchange="queryLocDesc(this)">
40 <option value="0" selected>----------</option>
41 <option value="1">台北市</option>
42 <option value="2">台北縣</option>
43 <option value="3">基隆市</option>
44 <option value="4">宜蘭縣</option>
45 <option value="5">桃園縣</option>
46 </select>
47 </td>
48 <td>
49 <div id="descField"></div>
50 </td>
51
52 </tr>
53 </table>
54
55 </body>
56 </html>

執行結果

程式說明

這個範例的流程圖如右:

這個範例看起來簡單多了, 這也是我們為什麼要使用 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 需求, 且個別去執行動作。

function init() {
ajaxEngine.registerRequest('AID_FOODQUERY', 'food.php');
ajaxEngine.registerRequest('AID_FUNQUERY', 'fun.php');
ajaxEngine.registerRequest('AID_INFO', 'info.php');
}

function queryFood() {
ajaxEngine.sendRequest('AID_FOODQUERY');
}

function queryFun() {
ajaxEngine.sendRequest('AID_FUNQUERY');
}

function queryInfo() {
ajaxEngine.sendRequest('AID_INFO');
}

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

<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response type="element" id="descField">
<img src="/images/sights/taipeicity00.jpg" />
<table border="0">
<tr><td><b>面積</b>： 271.7997平方公里</td></tr>
<tr><td><b>人口</b>：264萬6474人(2001.6)</td></tr>
<tr><td><b>知名小吃：</b></td></tr>
<tr><td>香腸、麵線、小籠包、麻辣鍋、滷味、豆乾、芒果冰
、牛肉麵、藥燉排骨、大餅包小餅、豆花、蛇肉、下午茶、飲茶
、茶點、夜市小吃、各省料理、各國料理</td></tr>
</table>
</response>
</ajax-response>

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

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

ajaxEngine.registerAjaxElement('descField');

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

分享到：