结合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', 　$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() 函数，让用户将缩略图展开成完整的图像（参见清单 4）。注意，脚本 index.php（以及后面要创建的 expand.php）只在这两个函数中调用。这样就很容易改变链接的功能。事实上在下面与 Sajax 进行集成时，只有这两个函数需要修改。

　　清单 4. get_image_link、get_table_link 实现

function get_table_link ( $title, $start, $step ) { 　$link = "index.php?start=$start&step=$step"; 　return '＜a href="' . $link . '"＞' . $title .'＜/a＞'; } function get_image_link ( $title, $index ) { 　$link = "expand.php?index=$index"; 　return '＜a href="' . $link . '"＞' . $title . '＜/a＞'; }

　　放大图片

　　现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是允许用户单击缩略图来查看全图。get_image_link() 函数调用了 expand.php 脚本，我们现在就来编写它。该脚本传递用户希望展开的文件的索引，因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了，只需创建病输出 image 标记即可。

　　清单 5. get_image 函数

function get_image ( $index ) { 　$images = get_image_list ( 'images' ); 　// Generate navigation 　$output .= '＜img src="images/' . $images[$index] . '" /＞'; 　return $output; }

　　接下来还要提供与分页器类似的导航机制。“上一张” 导航到编号为 $index-1 的图像，“下一张” 导航到编号为 $index+1 的图像，“返回” 则回到分页器。

　　清单 6. get_image 导航

$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＞';

　　最后创建一个简单的 HTML 容器，将其命名为 expand.php。

　　清单 7. get_image 导航

＜!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＞

　　这样我们就完成了相册。用户可以看到所有的图片，而且很容易导航。自然，用户可以来回切换，甚至能通过书签功能返回喜欢的图片。

图 2. 完成的相册