異步 JavaScript 和 XML（Asynchronous JavaScript and XML，Ajax）無疑是最流行的新 Web 技術(shù)。本文中我們將完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 創(chuàng)建一個(gè)簡單的相冊(cè)作為在線 Web 應(yīng)用程序。我們首先用標(biāo)準(zhǔn)的 PHP 開發(fā)方法編寫簡單的相冊(cè)，然后再用 Sajax 將其變成活動(dòng)的 Web 應(yīng)用程序。
創(chuàng)建一個(gè)簡單的相冊(cè)
本文將使用兩種方法創(chuàng)建一個(gè)簡單的相冊(cè)：傳統(tǒng)的 Web 應(yīng)用程序和基于 Sajax 的應(yīng)用程序。我們將用 PHP 編寫一個(gè)相冊(cè)，讀取某一目錄中的內(nèi)容，顯示縮略圖組成的表格。如果用戶單擊一個(gè)縮略圖，就會(huì)完全展開該圖像。因?yàn)榫帉懙氖莻鹘y(tǒng)應(yīng)用程序，所以每次單擊都會(huì)是一個(gè)新的 HTTP 請(qǐng)求，而參數(shù)則作為 URL 的一部分傳遞。
您將學(xué)習(xí)如何將 Sajax 庫應(yīng)用于相冊(cè)，了解為何使用 Sajax 可以加快應(yīng)用程序的開發(fā)。
添加一個(gè)分頁器表
訪問相冊(cè)的用戶需要某種快速查看照片的方法。因?yàn)楹芏啻笳掌蝗菀自谝豁撋巷@示，所以需要?jiǎng)?chuàng)建一個(gè)分頁器 —— 每次顯示少量縮略圖的簡單表格。還要編寫導(dǎo)航，幫助用戶在圖像列表中來回移動(dòng)。
圖 1. 分頁器提供了顯示用戶照片的一種方式
什么是 OpenAjax Alliance？
2006 年 5 月 JavaOne Conference 開始前，29 家公司的代表在 Adobe Systems 的會(huì)議室里碰頭，準(zhǔn)備大體上確定 Ajax 的未來，這個(gè)小組就稱為 OpenAjax Alliance。
小組做了幾項(xiàng)決定，其中最顯著的就是給自己取了個(gè)名字：OpenAjax Alliance。它還決定不把自己組織成一個(gè)正式的標(biāo)準(zhǔn)團(tuán)體，或者 Eclipse Foundation 那樣的開放源碼主導(dǎo)的組織，因此小組自身的形式暫時(shí)也是非正式的。小組同意大約每周召開一次電話會(huì)議。
OpenAjax Alliance 主要關(guān)注三個(gè)方面：通過提供互操作性降低采用 Ajax 的風(fēng)險(xiǎn)，保證 Ajax 解決方案堅(jiān)持走開放標(biāo)準(zhǔn)路線和使用開放源碼技術(shù)，保持 Web 的開放性。小組的第一項(xiàng)任務(wù)就是尋求建立和保持 Ajax 工具間互操作性的方法。
OpenAjax Alliance 包括 31 家技術(shù)公司，其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。
首先要收集至少 20 幅 .jpg 圖片，并將它們放到一個(gè)文件夾中。每個(gè)圖片還要有一個(gè)保存在單獨(dú)縮略圖文件夾中的縮略圖。雖然可使用 GD 軟件包生成縮略圖（請(qǐng)參閱 參考資料），但本文假設(shè)已經(jīng)準(zhǔn)備好了縮略圖。也可使用本文提供的照片和縮略圖（請(qǐng)參閱 下載）。
為了完成本文的剩余部分，后面假設(shè)照片保存在 /images 子目錄中，縮略圖則放在 /images/thumbnails 中?？梢栽诖a中做適當(dāng)?shù)男薷?。此外，我們還假定縮略圖和對(duì)應(yīng)的圖像使用相同的名稱。
分頁器應(yīng)該傳遞兩個(gè)參數(shù)：start 是按照字母順序顯示的第一幅照片的索引號(hào)，step 是顯示的照片數(shù)。
清單 1. 相冊(cè)查看器
/*
* Find a list of images in /images and provide thumbnails
*/
function get_table ( $limit_start = 0, $limit_step = 5 ) {
$images = get_image_list('images');
// Generate navigation for Previous and Next buttons
// Code given below
$output .= '＜table class="image_table"＞';
$columns = 5;
foreach ($images as $index =＞ $image) {
// Begin directory listing at item number $limit_start
if ( $index ＜ $limit_start ) continue;
// End directory listing at item number $limit_end
if ( $index ＞= $limit_start + $limit_step ) continue;
// Begin column
if ( $index - $limit_start % $columns == 0 ) {
$output .= '＜tr＞';
}
// Generate link to blown up image (see below)
$thumbnail = '＜img src="thumbnails/' . $image . '" /＞';
$output .= '＜td＞' . get_image_link($thumbnail, $index) . '＜/td＞';
// Close column
if ( $index - $limit_start % $columns == $columns - 1 ) {
$output .= '＜/tr＞';
}
}
$output .= '＜/table＞';
return $nav . $output;
}
這個(gè)表很簡單，它從索引號(hào) $limit_start 開始遍歷圖片列表。然后放上每個(gè)圖片的縮略圖，每五張圖片作為一行。達(dá)到 $limit_start + $limit_step 的時(shí)候循環(huán)結(jié)束。
該表是目錄列表的可視化表示，因此需要一個(gè)函數(shù)列出目錄中的所有圖像。清單 1 中的 get_file_list() 函數(shù)用索引數(shù)組返回 /images 目錄中的所有圖片列表。下面是一個(gè)示例實(shí)現(xiàn)。
清單 2. get_file_list 實(shí)現(xiàn)
function get_image_list ( $image_dir ) {
$d = dir($image_dir);
$files = array();
if ( !$d ) return null;
while (false !== ($file = $d-＞read())) {
// getimagesize returns true only on valid images
if ( @getimagesize( $image_dir . '/' . $file ) ) {
$files[] = $file;
}
}
$d-＞close();
return $files;
}
注意：本文后面還要使用 get_file_list() 函數(shù)。有一點(diǎn)很重要，無論何時(shí)調(diào)用該函數(shù)，返回的數(shù)組都是不變的。因?yàn)樘峁┑膶?shí)現(xiàn)要進(jìn)行目錄搜索，必須保證目錄中的指定文件不會(huì)改變，每次都要按字母順序排序。
導(dǎo)航的實(shí)現(xiàn)
雖然表格列出了目錄中的一些圖像，但用戶還需要一種查看表格中未出現(xiàn)的圖片的方法。要真正實(shí)現(xiàn)分頁器的導(dǎo)行，則需要一套標(biāo)準(zhǔn)的鏈接：首頁、上一頁、下一頁和尾頁。
清單 3. 分頁器導(dǎo)航
// Append navigation
$output = '＜h4＞Showing items ' . $limit_start . '-' .
min($limit_start + $limit_step - 1, count($images)) .
' of ' . count($images) . '＜br /＞';
$prev_start = max(0, $limit_start - $limit_step);
if ( $limit_start ＞ 0 ) {
$output .= get_table_link('＜＜', 0, $limit_step);
$output .= ' | ' . get_table_link('Prev',
$prev_start, $limit_step);
} else {
$output .= '＜＜ | Prev';
}
// Append next button
$next_start = min($limit_start + $limit_step, count($images));
if ( $limit_start + $limit_step ＜ count($images) ) {
$output .= ' | ' . get_table_link('Next',$next_start, $limit_step);
$output .= ' | ' . get_table_link('＞＞',(count($images) - $limit_step), $limit_step);
} else {
$output .= ' | Next | ＞＞';
}
$output .= '＜/h4＞';
最后還要編寫 get_image_link() 和 get_table_link() 函數(shù)，讓用戶將縮略圖展開成完整的圖像（參見清單 4）。注意，腳本 index.php（以及后面要?jiǎng)?chuàng)建的 expand.php）只在這兩個(gè)函數(shù)中調(diào)用。這樣就很容易改變鏈接的功能。事實(shí)上在下面與 Sajax 進(jìn)行集成時(shí)，只有這兩個(gè)函數(shù)需要修改。
清單 4. get_image_link、get_table_link 實(shí)現(xiàn)
function get_table_link ( $title, $start, $step ) {
$link = "index.php?start=$startstep=$step";
return '＜a href="' . $link . '"＞' . $title .'＜/a＞';
}
function get_image_link ( $title, $index ) {
$link = "expand.php?index=$index";
return '＜a href="' . $link . '"＞' . $title . '＜/a＞';
}
放大圖片
現(xiàn)在有了一個(gè)可用的分頁器為用戶提供一些縮略圖。相冊(cè)的第二項(xiàng)功能是允許用戶單擊縮略圖來查看全圖。get_image_link() 函數(shù)調(diào)用了 expand.php 腳本，我們現(xiàn)在就來編寫它。該腳本傳遞用戶希望展開的文件的索引，因此必須在此列出目錄并獲得適當(dāng)?shù)奈募?。隨后的操作就很簡單了，只需創(chuàng)建病輸出 image 標(biāo)記即可。
清單 5. get_image 函數(shù)
function get_image ( $index ) {
$images = get_image_list ( 'images' );
// Generate navigation
$output .= '＜img src="images/' . $images[$index] . '" /＞';
return $output;
}
接下來還要提供與分頁器類似的導(dǎo)航機(jī)制。“上一張” 導(dǎo)航到編號(hào)為 $index-1 的圖像，“下一張” 導(dǎo)航到編號(hào)為 $index+1 的圖像，“返回” 則回到分頁器。
清單 6. get_image 導(dǎo)航
$output .= '＜h4＞Viewing image ' . $index .' of ' . count($images) . '＜br /＞';
if ( $index ＞ 0 ) {
$output .= get_image_link('＜＜', 0);
$output .= ' | ' . get_image_link('Prev', $index-1);
} else {
$output .= '＜＜ | Prev';
}
$output .= ' | ' . get_table_link('Up', $index, 5);
if ( $index ＜ count($images) ) {
$output .= ' | ' . get_image_link('Next', $index+1);
$output .= ' | ' . get_image_link('＞＞', count($images));
} else {
$output .= ' | Next | ＞＞';
}
$output .= '＜/h4＞';
最后創(chuàng)建一個(gè)簡單的 HTML 容器，將其命名為 expand.php。
清單 7. get_image 導(dǎo)航
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞Creating a simple picture album viewer＜/title＞
＜style type="text/css"＞
body { text-align: center }
table.image_table { margin: 0 auto 0 auto; width: 700px;
padding:10px; border: 1px solid #ccc; background: #eee; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px;
padding: 2px; border: 1px solid #ccc; }
＜/style＞
＜/head＞
＜body＞
＜h1＞Creating a simple picture album viewer＜/h1＞
＜?php
$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;
echo get_image($index);
?＞
＜/body＞
＜/html＞
這樣我們就完成了相冊(cè)。用戶可以看到所有的圖片，而且很容易導(dǎo)航。自然，用戶可以來回切換，甚至能通過書簽功能返回喜歡的圖片。
圖 2. 完成的相冊(cè)
添加 Sajax
現(xiàn)在相冊(cè)提供了基本的導(dǎo)航功能，目錄中的圖像添加了索引。下面您將看到添加 Sajax 能夠改進(jìn)編程和用戶體驗(yàn)。
這里假設(shè)您對(duì) Ajax 有基本的了解，最好還熟悉 Sajax 的基礎(chǔ)知識(shí)（請(qǐng)參閱 參考資料 中的教程）。
Sajax、Ajax 與傳統(tǒng) Web 應(yīng)用程序
現(xiàn)在我們已經(jīng)使用標(biāo)準(zhǔn)的 Web 開發(fā)模型開發(fā)了應(yīng)用程序。兩項(xiàng)主要功能是分頁器和圖像查看器，它們分別對(duì)應(yīng)不同的 PHP 文件。參數(shù)作為 HTTP GET 請(qǐng)求傳遞給腳本，腳本直接向 Web 客戶機(jī)返回頁面。
圖 3. 在傳統(tǒng)的 Web 應(yīng)用程序中，三個(gè)不同的請(qǐng)求調(diào)用了兩個(gè)頁面
Web 開發(fā)社區(qū)的人都知道，Ajax 允許向服務(wù)器發(fā)出異步的輔助請(qǐng)求，并直接在網(wǎng)頁中顯示結(jié)果（如圖 4 所示）。不幸的是，即便最簡單的 Ajax 應(yīng)用程序?qū)崿F(xiàn)起來也是一項(xiàng)大任務(wù)。因?yàn)?Ajax 不是標(biāo)準(zhǔn)化的技術(shù)，Internet Explorer 和其他瀏覽器（如 Firefox、Safari）的實(shí)現(xiàn)是不同的。此外，程序員至少要編寫三個(gè)函數(shù)才能實(shí)現(xiàn)一個(gè)功能，這三個(gè)函數(shù)是：發(fā)送 HTTP 請(qǐng)求的初始 JavaScript，返回響應(yīng)的 PHP 腳本，以及另一個(gè)處理這些響應(yīng)的 JavaScript 函數(shù)。
圖 4. Ajax 應(yīng)用程序負(fù)責(zé)所有的 HTTP 請(qǐng)求
建立在 Ajax 庫之上的 Sajax 通過運(yùn)用簡單的啟發(fā)式方法大大簡化了這一過程：Web 客戶機(jī)需要訪問的每個(gè) PHP 函數(shù)都由 Sajax “導(dǎo)出”。如果有一個(gè)名為 foo_bar() 的 PHP 函數(shù)，那么 Sajax 會(huì)把該函數(shù)導(dǎo)出為 JavaScript 函數(shù) x_foo_bar()?？蛻魴C(jī)對(duì) x_foo_bar() 的任何調(diào)用都會(huì)自動(dòng)轉(zhuǎn)發(fā)給服務(wù)器上的 foo_bar()，輸出則傳遞給另一個(gè) JavaScript 函數(shù)。清單 8 中的簡短頁面示范了這種功能。運(yùn)行這個(gè)例子需要下載 Sajax 庫（請(qǐng)參閱 參考資料）。
清單 8. Sajax 的應(yīng)用
＜?php
require("Sajax.php");
function foo_bar ( $param ) {
return "You typed: $param";
}
$sajax_request_type = "GET"; // Set HTTP request type to GET
sajax_init(); // Prepare Sajax
sajax_export("foo_bar"); // foo_bar can now be called by client
sajax_handle_client_request(); // Discussed below
?＞
＜html＞
＜head＞
＜script language="javascript"＞
＜? sajax_show_javascript(); ?＞
＜/script＞
＜/head＞
＜body＞
＜form onSubmit="x_foo_bar(this.input.value, alert);return false;"＞
＜input type="text" name="input" /＞
＜/form＞
＜/body＞
＜/html＞
如果打開清單 8 中的頁面，在輸入框中輸入一些內(nèi)容然后單擊 Enter，那么輸入內(nèi)容就會(huì)在一個(gè)警告框中顯示出來。但在這個(gè)看似簡單的網(wǎng)頁背后，x_foo_bar() JavaScript 函數(shù)將遠(yuǎn)程調(diào)用 foo_bar() 函數(shù)，并把響應(yīng)傳遞給 JavaScript 內(nèi)置函數(shù) alert()。每個(gè) Sajax 導(dǎo)出函數(shù)的最后一個(gè)參數(shù)都是一個(gè)響應(yīng)處理程序，負(fù)責(zé)處理 foo_bar() 的輸出。
這個(gè)例子還說明了 Sajax 快速開發(fā)的另一個(gè)重要特性：不需要每個(gè)函數(shù)都有一個(gè)單獨(dú)的文件，頁面實(shí)際上調(diào)用的是其自身，因此更便于跟蹤函數(shù)的調(diào)用（如圖 5 所示）。x_foo_bar() 函數(shù)直接向頁面發(fā)回 Ajax 請(qǐng)求，在請(qǐng)求中包含函數(shù)名和參數(shù)。關(guān)鍵是 sajax_handle_client_request() 函數(shù)，它截獲所有的 Sajax 調(diào)用并自動(dòng)對(duì)它們進(jìn)行處理。
圖 5. 使用 Sajax 客戶機(jī)可通過一個(gè)頁面訪問服務(wù)器端的多個(gè)函數(shù)
將 Sajax 連接到相冊(cè)
利用剛剛創(chuàng)建的代碼，我們將用 Sajax 迅速把相冊(cè)從多頁面應(yīng)用程序轉(zhuǎn)化成活動(dòng)的 Ajax 應(yīng)用程序。
因?yàn)橄鄡?cè)主要有兩個(gè)函數(shù)，get_table() 和 get_image()，這也是需要用 Sajax 導(dǎo)出的全部函數(shù)。事實(shí)上，為了通過 Sajax 調(diào)用這些函數(shù)，這些函數(shù)本身基本上不需要修改，很快我們就會(huì)看到，我們只需要修改生成的鏈接即可。
清單 9. Sajax 相冊(cè)的頭部
＜?php
require("Sajax.php");
function get_image () { } // Defined later
function get_thumbs_table () { } // Defined later
// Standard Sajax stuff. Use Get, and export two
// main functions to javascript
$sajax_request_type = "GET";
sajax_init();
sajax_export("get_thumbs_table", "get_image");
sajax_handle_client_request();
?＞
對(duì)于本文而言，文檔主體部分很簡單。我們將使用 div 和 window 的 id 來顯示服務(wù)器的輸出。
清單 10. 顯示服務(wù)器輸出的 div 和 window id
＜body＞
＜h1＞Sajax photo album＜/h1＞
＜div id="window"＞＜/div＞
＜/body＞
最后還要編寫 JavaScript 回調(diào)函數(shù)。該例中，因?yàn)樗械姆?wù)器輸出都直接輸出到 window div 標(biāo)記，所以可以重復(fù)使用簡單的回調(diào)函數(shù)。將回調(diào)函數(shù)添加到 Sajax 函數(shù)調(diào)用中，就可以得到頭（head）。
清單 11. 簡單的頭
＜head＞
＜title＞Creating a Sajax photo album＜/title＞
＜style type="text/css"＞
body { text-align: center }
div#window { margin: 0 auto 0 auto; width: 700px;
padding: 10px; border: 1px solid #ccc; background: #eee; }
table.image_table { margin: 0 auto 0 auto; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px
padding: 2px; border: 1px solid #ccc; }
img.full { display: block; margin: 0 auto 0 auto;
width: 300px; border: 1px solid #000 }
＜/style＞
＜script language="javascript"＞
＜? sajax_show_javascript(); ?＞
// Outputs directly to the "window" div
function to_window(output) {
document.getElementById("window").innerHTML = output;
}
window.onload = function() {
x get table to window);
};
＜/script＞
＜/head＞
最后一步是保證應(yīng)用程序中的所有鏈接都是自定義的 Sajax 調(diào)用。只需要取上一節(jié)中的代碼并作如下替換：href="index.php?start=0step=5" 變?yōu)?onclick="x_get_table(0, 5, to_window)"，href="expand.php?index=0" 變?yōu)?onclick="x_get_image(0, to_window)"。
并在相應(yīng)的函數(shù)中做同樣修改：get_image_link() 和 get_table_link()。這樣向 Sajax 的轉(zhuǎn)化就完成了（如圖 6 所示）。所有鏈接都變成了與遠(yuǎn)程 PHP 調(diào)用對(duì)應(yīng)的 JavaScript 調(diào)用，PHP 使用 JavaScript 響應(yīng)處理程序 to_window() 直接輸出到頁面。
整個(gè)應(yīng)用程序都包含在一個(gè)頁面中，還可以把其余功能（get_table()、get_image() 等）放在不能從 Web 訪問的單獨(dú)的庫文件中。在大多數(shù) Ajax 應(yīng)用程序中，每個(gè)發(fā)往服務(wù)器的請(qǐng)求都需要由單獨(dú)的腳本處理，或至少需要編寫一個(gè)非常龐大的處理程序腳本來重定向請(qǐng)求。將所有這些文件都集中到一起可能非常麻煩。使用 Sajax 永遠(yuǎn)只需要一個(gè)文件，在該文件中只需定義我們使用的函數(shù)即可。Sajax 代替了處理程序腳本。
圖 6. 完成的基于 Sajax 的相冊(cè)（縮略圖）
可以看到 URL 仍然保持不變，并帶來了更多愉快的用戶體驗(yàn)。window div 顯示在一個(gè)灰色的框中，通過 Sajax 生成的內(nèi)容非常清楚。腳本不一定要知道自身或者它在服務(wù)器上的位置，因?yàn)樗械逆溄幼罱K都成為直接對(duì)頁面自身的 JavaScript 調(diào)用。因此我們的代碼能夠很好的模塊化。我們只需要保持 JavaScript 和 PHP 函數(shù)在同一個(gè)頁面上即可，即使頁面位置發(fā)生了變化也沒有關(guān)系。
擴(kuò)展相冊(cè)
使用 Sajax 把我們的相冊(cè)變成活動(dòng)的 Web 應(yīng)用程序如此輕而易舉，我們要再花點(diǎn)時(shí)間添加一些功能，進(jìn)一步說明 Sajax 如何使從服務(wù)器檢索數(shù)據(jù)變得完全透明。我們將為相冊(cè)添加元數(shù)據(jù)功能，這樣用戶就能為他們的圖片添加說明。
元數(shù)據(jù)
沒有上下文說明的相冊(cè)是不完整的，比如照片的來源、作者等。為此我們要將圖像集中起來創(chuàng)建一個(gè)簡單的 XML 文件。根節(jié)點(diǎn)是 gallery，它包含任意多個(gè) photo 節(jié)點(diǎn)。每個(gè) photo 節(jié)點(diǎn)都通過其 file 屬性來編號(hào)。在 photo 節(jié)點(diǎn)中可以使用任意多個(gè)標(biāo)記來描述照片，但本例中只使用了 date、locale 和 comment。
清單 12. 包含元數(shù)據(jù)的 XML 文件
＜?xml version="1.0"?＞
＜gallery＞
?。紁hoto file="image01.jpg"＞
＜date＞August 6, 2006＜/date＞
?。糽ocale＞Los Angeles, CA＜/locale＞
＜comment＞Here's a photo of my favorite celebrity＜/comment＞
?。?photo＞
＜photo file="image02.jpg"＞
?。糳ate＞August 7, 2006＜/date＞
＜locale＞San Francisco, CA＜/locale＞
?。糲omment＞In SF, we got to ride the street cars＜/comment＞
?。?photo＞
?。紁hoto file="image03.jpg"＞
?。糳ate＞August 8, 2006＜/date＞
?。糽ocale＞Portland, OR＜/locale＞
＜comment＞Time to end our road trip!＜/comment＞
?。?photo＞
＜/gallery＞
文件的解析不在本文討論范圍之列。我們假設(shè)您能夠熟練使用 PHP 中眾多 XML 解析方法中的一種。如果不熟悉的話，建議閱讀 參考資料 中的文章。我們不再浪費(fèi)時(shí)間解釋如何將該文件轉(zhuǎn)化成 HTML，作為一個(gè)練習(xí)，讀者可以自己了解下面的代碼如何使用 XML 文件并生成 HTML。清單 13 中的代碼使用了 PHP V5 中自帶的 SimpleXML 包。
清單 13. 元數(shù)據(jù)函數(shù)
function get_meta_data ( $file ) {
// Using getimagesize, the server calculates the dimensions
list($width, $height) = @getimagesize("images/$file");
$output = "＜p＞W(wǎng)idth: {$width}px, Height: {$height}px＜/p＞";
// Use SimpleXML package in PHP_v5:
// http://us3.php.net/manual/en/ref.simplexml.php
$xml = simplexml_load_file("gallery.xml");
foreach ( $xml as $photo ) {
if ($photo['id'] == $file) {
$output .= !empty($photo-＞date) ? "＜p＞Date taken:{$photo-＞date}＜/p＞" : '';
$output .= !empty($photo-＞locale) ? "＜p＞Location:{$photo-＞locale}＞/p＞" : '';
$output .= !empty($photo-＞comment) ? "＜p＞Comment:{$photo-＞comment}＜/p＞" : '';
}
}
return $output;
要注意的是，get_meta_data() 函數(shù)中還使用 getimagesize()（一個(gè)核心 PHP 函數(shù)，不需要 GD）計(jì)算圖像的大小。
再回到 get_image() 函數(shù)，它包含由 get_image_list() 生成的文件名的列表。查找元數(shù)據(jù)只需要將文件名傳遞給該函數(shù)即可。
清單 14. 添加元數(shù)據(jù)
function get_image ( $index ) {
$images = get_image_list ( 'images' );
// ...
$output .= '＜img src="images/' . $images[$index] . '" /＞';
$output .= '＜div id="meta_data"＞' .
get_meta_data( $images[$index] ) . '＜/div＞';
return $output;
}
重新打開頁面將看到服務(wù)器請(qǐng)求的結(jié)果。圖 7 顯示了帶有元數(shù)據(jù)的放大的圖像。
圖 7. 使用元數(shù)據(jù)的相冊(cè)
結(jié)束語
我們看到，使用 Sajax 可以消除客戶機(jī)和服務(wù)器之間的障礙，程序員能夠進(jìn)行無縫遠(yuǎn)程函數(shù)調(diào)用而不用擔(dān)心傳輸層、HTTP GET 和 POST 請(qǐng)求。我們可以花更多時(shí)間編寫提供數(shù)據(jù)的 PHP 腳本以及表示層和控制層的 JavaScript。在這個(gè)相冊(cè)例子中，我們讓客戶機(jī)直接連接到圖像數(shù)據(jù)庫。通過添加簡單的元數(shù)據(jù)，我們看到讓用戶直接訪問服務(wù)器上的信息是多么簡單，無需擔(dān)心協(xié)議的問題。
與所有的 Ajax 應(yīng)用程序一樣，我們的相冊(cè)也有一個(gè)致命的弱點(diǎn)：沒有使用瀏覽器的 “訪問歷史”，因?yàn)槠茐牧撕笸税粹o的功能。在 “利用 PHP 開發(fā) Ajax 應(yīng)用程序” 系列的第 2 部分中，我們將通過實(shí)現(xiàn)歷史記錄緩沖和狀態(tài)跟蹤機(jī)制來解決這個(gè)問題。
