級聯下拉菜單就是從一個下拉菜單中選中一項後，相應的另一個下拉菜單的內容會隨之改變。
一般來說，最簡單的，就是每次選中都提交一次表單，刷新整個頁面。這也是用戶體驗度最差的。
另一種是把所有選項在第一次加載時就全部載入整個頁面中的 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 行語句：
rpc.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 () {
// 調用獲取省份內容的遠程過程，並設置回調函數為 set_province_select
rpc.get_province(set_province_select);
}
index.Html
<Html>
<head>
<script type="text/Javascript" src="PHPrpc_clIEnt.JS"></script>
<script type="text/Javascript" src="area.JS"></script>
</head>
<body onload="rpc.use_service('rpc.PHP');">
<select id="province" onchange="change_province(this.value);"></select>
<select id="city"></select>
</body>
</Html>
上面的 Html 中包含的 PHPrpc_clIEnt.js 是壓縮版本（因為不需要用到加密，這裡是 lite 壓縮版）的，這樣可以免去包含多個 JS 文件的麻煩。
大家會發現這個程序不但可復用性好（比如 clear_select 和 set_select 兩個函數也可以在其它程序中使用），而且使得整個程序的思路清晰，比如那個緩存功能，在這裡實現的就非常的簡單，而且效果也非常的好。
通過 PHPRPC，你不需要再專注於服務器端和客戶端的數據格式交換，不需要再去考慮 XMLHttpRequest 對象的創建和使用，PHPRPC 會自動幫你完成這一切，你只需要關注具體的事務就可以了。用 PHPRPC 來做 AJax 編程，就是這麼簡單。
