用PHPRPC實現Ajax級聯下拉式功能表

級聯下拉式功能表就是從一個下拉式功能表中選中一項後，相應的另一個下拉式功能表的內容會隨之改變。

一般來說，最簡單的，就是每次選中都提交一次表單，重新整理整個頁面。這也是使用者體驗度最差的。

另一種是把所有選項在第一次載入時就全部載入整個頁面中的 javascript 數組中，然後級聯通過 JavaScript 來控制，在整個資料量不大時，這是一個不錯的實現無重新整理並且快速的方法，但是當整個資料量非常大時，這種方法就會使第一次載入變得非常慢了。

還有就是採用 Ajax 方式，即開始只載入第一層菜單的內容，當使用者選中第一層菜單的某項時，再通過 XmlHttpRequest 來擷取相應選項所對應的第二層菜單的內容。這種方式效果最好，但是採用傳統方式來編寫這樣的 Ajax 程式碼量會比較多。而且如果設計不好，伺服器端返回菜單內容的程式的可複用性也會很差。

但是在本文中你會看到用 PHPRPC 來實現這種 Ajax 效果是多麼的簡單，並且還會具有非常高的可複用性。

本文以省市兩級級聯下拉式功能表為例，為了舉例方便，本文中採用的是 SQLite 資料庫，因為這個檔案型資料庫比較容易部署，而且查詢效率很高（當然建立該資料庫的效率不高，但建立僅一次而已，該資料庫在該程式中內容是不變的），不過伺服器需要安裝 SQLite 擴充。

這個資料庫中的表只有 2 個，一個 province 表，一個 city 表。province 表中，只有 id 和 name 兩個欄位，分別是省份編號（主鍵）和省名。city 表中，有 id、name 和 pid 三個欄位，id 是城市編號，name 是城市名，pid 是城市所在省的編號，與 province 表中的省份編號相對應。

建立該資料庫的程式這裡就不給出來了，它包含在後面提供的執行個體下載中。

下面來看看建立這個程式的伺服器端有多麼簡單，為了提高可複用性，我們把伺服器端分為了 2 個檔案，一個是 function.php，另一個是 rpc.php。function.php 中定義了實際的遠程調用函數，但是他們也可以作為伺服器端的本地函數調用，你會發現他們跟伺服器端的普通函數沒有任何區別：

下載: function.php
<?php
$sqlite = new SQLiteDatabase('area.db');

function get_province() {
global $sqlite;
$sql = "select * from province order by id";
return $sqlite->arrayQuery($sql, SQLITE_ASSOC);
}

function get_city($pid) {
global $sqlite;
$pid = sqlite_escape_string($pid);
$sql = "select * from city where pid = $pid order by id";
return $sqlite->arrayQuery($sql, SQLITE_ASSOC);
}
?>
而 rpc.php 更加簡單，它是提供給用戶端調用的介面，它只有 3 行語句：

下載: function.php
<?php
require_once('function.php');
require_once('phprpc_server.php');
new phprpc_server(array('get_province', 'get_city'));
?>
其中最後一句，就是指定哪些函數要暴露給用戶端。只有指定的函數用戶端才可以調用，這樣可以保證伺服器的安全性。

伺服器端到此就建立完了。你會探索服務器端只負責把資料查詢出來返回給用戶端就完事了，其它的不做任何處理。

那麼下面該看一看用戶端了，用戶端雖然很簡單，但是我還是把它分成了兩個檔案，一個 js 檔案，一個 html 檔案，你會發現用 PHPRPC，用戶端都不需要用 PHP。

下載: area.js
// 建立 phprpc 用戶端對象 rpc
phprpc_client.create('rpc');

var city = []; // 用於緩衝已載入的城市資料

/*
* 清除 select 中的選項，該方法可複用
*
* so: 要清除選項的 select 對象
*
*/
function clear_select(so) {
for (var i = so.options.length - 1; i > -1; i--) {
// 有些瀏覽器不支援 options 屬性的 remove 方法，
// 但支援 DOM 的 removeChild 方法（比如：Konqueror）
if (so.options.remove) {
so.options.remove(i);
}
else {
so.removeChild(so.options[i]);
}
}
}

/*
* 設定 select 中的選項，該方法可複用
*
* so: 要設定選項的 select 對象
* d: 選項資料數組
* vf: 選項值所對應的數組中的欄位名
* tf: 選項文本所對應的數組中的欄位名
*/
function set_select(so, d, vf, tf) {
for (var i = 0, n = d.length; i < n; i++) {
var opt = document.createElement('option');
opt.text = d[i][tf];
opt.value = d[i][vf];
// 有些瀏覽器不支援 options 屬性的 add 方法，
// 但支援 DOM 的 appendChild 方法（比如：Konqueror）
if (so.options.add) {
so.options.add(opt);
}
else {
so.appendChild(opt);
}
}
}

// 設定省份的下拉式功能表
function set_province_select(d) {
var so = document.getElementById('province');
set_select(so, d, 'id', 'name');
// 設定首選省份的城市下拉式清單
change_province(1);
}

// 設定城市的下拉式功能表
function set_city_select(d, vf, tf) {
var so = document.getElementById('city');
// 清空原有選項
clear_select(so);
// 設定新選項
set_select(so, d, vf, tf);
}

// 當省份改變，相應的改變城市列表
function change_province(pid) {
// 如果已緩衝，則直接顯示緩衝中的列表
if (city[pid]) {
set_city_select(city[pid], 'id', 'name');
}
else {
// 否則，先顯示載入中
set_city_select([['', 'Loading...']], 0, 1);
// 然後調用遠程過程載入城市資訊
// 調用遠程過程時，最後一個參數指定的是回呼函數
rpc.get_city(pid, function (result) {
// 把載入的資料放入緩衝
city[pid] = result;
// 更新城市列表
set_city_select(result, 'id', 'name');
});
}
}

// 定義當 rpc 用戶端初始化（use_service）完畢後執行的內容
rpc.onready = function () {