異步 JavaScript 和 XML(Asynchronous JavaScript and XML，Ajax)無疑是最流行的新 Web 技術。“結合 Ajax 進行 PHP 開發” 這個系列包括兩部分，我們將完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 創建一個簡單的相冊作為在線 Web 應用程序。我們首先用標准的 PHP 開發方法編寫簡單的相冊，然後再用 Sajax 將其變成活動的 Web 應用程序。
創建一個簡單的相冊
本文將使用兩種方法創建一個簡單的相冊：傳統的 Web 應用程序和基於 Sajax 的應用程序。我們將用 PHP 編寫一個相冊，讀取某一目錄中的內容，顯示縮略圖組成的表格。如果用戶單擊一個縮略圖，就會完全展開該圖像。因為編寫的是傳統應用程序，所以每次單擊都會是一個新的 HTTP 請求，而參數則作為 URL 的一部分傳遞。
您將學習如何將 Sajax 庫應用於相冊，了解為何使用 Sajax 可以加快應用程序的開發。
添加一個分頁器表
訪問相冊的用戶需要某種快速查看照片的方法。因為很多大照片不容易在一頁上顯示，所以需要創建一個分頁器 —— 每次顯示少量縮略圖的簡單表格。還要編寫導航，幫助用戶在圖像列表中來回移動。
圖 1. 分頁器提供了顯示用戶照片的一種方式
首先要收集至少 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 .= '';
$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 .= '';
}
// Generate link to blown up image (see below)
$thumbnail = '';
$output .= '' . get_image_link($thumbnail, $index)
. '';
// Close column
if ( $index - $limit_start % $columns == $columns - 1 ) {
$output .= '';
}
}
$output .= '';
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() 函數。有一點很重要，無論何時調用該函數，返回的數組都是不變的。因為提供的實現要進行目錄搜索，必須保證目錄中的指定文件不會改變，每次都要按字母順序排序。 1
