結合AJAX進行PHP開發入門

非同步 javascript 和 XML（Asynchronous JavaScript and XML，Ajax）無疑是最流行的新 Web 技術。本文中我們將完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 建立一個簡單的相簿作為線上 Web 應用程式。我們首先用標準的 PHP 開發方法編寫簡單的相簿，然後再用 Sajax 將其變成活動的 Web 應用程式。

建立一個簡單的相簿

本文將使用兩種方法建立一個簡單的相簿：傳統的 Web 應用程式和基於 Sajax 的應用程式。我們將用 PHP 編寫一個相簿，讀取某一目錄中的內容，顯示縮圖組成的表格。如果使用者單擊一個縮圖，就會完全展開該映像。因為編寫的是傳統應用程式，所以每次單擊都會是一個新的 HTTP 要求，而參數則作為 URL 的一部分傳遞。

您將學習如何將 Sajax 庫應用於相簿，瞭解為何使用 Sajax 可以加快應用程式的開發。

添加一個分頁器表

訪問相簿的使用者需要某種快速查看照片的方法。因為很多大照片不容易在一頁上顯示，所以需要建立一個分頁器 —— 每次顯示少量縮圖的簡單表格。還要編寫導航，協助使用者在映像列表中來回移動。

圖 1. 分頁器提供了顯示使用者照片的一種方式

什麼是 OpenAjax Alliance？

2006 年 5 月 JavaOne Conference 開始前，29 家公司的代表在 Adobe Systems 的會議室裡碰頭，準備大體上確定 Ajax 的未來，這個小組就稱為 OpenAjax Alliance。

小組做了幾項決定，其中最顯著的就是給自己取了個名字：OpenAjax Alliance。它還決定不把自己組織成一個正式的標準團體，或者 Eclipse Foundation 那樣的開放源碼主導的組織，因此小組自身的形式暫時也是非正式的。小組同意大約每周召開一次電話會議。

OpenAjax Alliance 主要關注三個方面：通過提供互通性降低採用 Ajax 的風險，保證 Ajax 解決方案堅持走開放標準路線和使用開放源碼技術，保持 Web 的開放性。小組的第一項任務就是尋求建立和保持 Ajax 工具間互通性的方法。

OpenAjax Alliance 包括 31 家技術公司，其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。

首先要收集至少 20 幅 .jpg 圖片，並將它們放到一個檔案夾中。每個圖片還要有一個儲存在單獨縮圖檔案夾中的縮圖。雖然可使用 GD 軟體包產生縮圖（請參閱 參考資料），但本文假設已經準備好了縮圖。也可使用本文提供的照片和縮圖（請參閱 下載）。

為了完成本文的剩餘部分，後面假設照片儲存在 /images 子目錄中，縮圖則放在 /images/thumbnails 中。可以在代碼中做適當的修改。此外，我們還假定縮圖和對應的映像使用相同的名稱。

分頁器應該傳遞兩個參數：start 是按照字母順序顯示的第一幅照片的索引號，step 是顯示的照片數。

清單 1. 相簿查看器

/*
* 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;
}

這個表很簡單，它從索引號 $limit_start 開始遍曆圖片列表。然後放上每個圖片的縮圖，每五張圖片作為一行。達到 $limit_start + $limit_step 的時候迴圈結束。

該表是目錄列表的可視化表示，因此需要一個函數列出目錄中的所有映像。清單 1 中的 get_file_list() 函數用索引數組返回 /images 目錄中的所有圖片列表。下面是一個樣本實現。

清單 2. get_file_list 實現

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() 函數。有一點很重要，無論何時調用該函數，返回的數組都是不變的。因為提供的實現要進行目錄搜尋，必須保證目錄中的指定檔案不會改變，每次都要按字母順序排序。

導航的實現

雖然表格列出了目錄中的一些映像，但使用者還需要一種查看錶格中未出現的圖片的方法。要真正實現分頁器的導行，則需要一套標準的連結：首頁、上一頁、下一頁和尾頁。

清單 3. 分頁器導航
// 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',