结合AJAX进行PHP开发之入门.docx

1、结合AJAX进行PHP开发之入门异步 JavaScript 和 XML（Asynchronous JavaScript and XML，Ajax）无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册，然后再用 Sajax 将其变成活动的 Web 应用程序。创建一个简单的相册 本文将使用两种方法创建一个简单的相册：传统的 Web 应用程序和基于 Sajax 的应用程序。我们将用 PHP 编写一个相册，读取某一目录中的内容，显示缩略图组

2、成的表格。如果用户单击一个缩略图，就会完全展开该图像。因为编写的是传统应用程序，所以每次单击都会是一个新的 HTTP 请求，而参数则作为 URL 的一部分传递。您将学习如何将 Sajax 库应用于相册，了解为何使用 Sajax 可以加快应用程序的开发。添加一个分页器表访问相册的用户需要某种快速查看照片的方法。因为很多大照片不容易在一页上显示，所以需要创建一个分页器 每次显示少量缩略图的简单表格。还要编写导航，帮助用户在图像列表中来回移动。图 1. 分页器提供了显示用户照片的一种方式什么是 OpenAjax Alliance？2006 年 5 月 JavaOne Conference 开始前，2

3、9 家公司的代表在 Adobe Systems 的会议室里碰头，准备大体上确定 Ajax 的未来，这个小组就称为 OpenAjax Alliance。小组做了几项决定，其中最显著的就是给自己取了个名字：OpenAjax Alliance。它还决定不把自己组织成一个正式的标准团体，或者 Eclipse Foundation 那样的开放源码主导的组织，因此小组自身的形式暂时也是非正式的。小组同意大约每周召开一次电话会议。OpenAjax Alliance 主要关注三个方面：通过提供互操作性降低采用 Ajax 的风险，保证 Ajax 解决方案坚持走开放标准路线和使用开放源码技术，保持 Web 的开放

4、性。小组的第一项任务就是寻求建立和保持 Ajax 工具间互操作性的方法。OpenAjax Alliance 包括 31 家技术公司，其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。首先要收集至少 20 幅 .jpg 图片，并将它们放到一个文件夹中。每个图片还要有一个保存在单独缩略图文件夹中的缩略图。虽然可使用 GD 软件包生成缩略图（请参阅 参考资料），但本文假设已经准备好了缩略图。也可使用本文提供的照片和缩略图（请

5、参阅 下载）。为了完成本文的剩余部分，后面假设照片保存在 /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

6、_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_startif ( $index $limit_start ) continue;/ End directory listing at item numbe

7、r $limit_endif ( $index = $limit_start + $limit_step ) continue;/ Begin columnif ( $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 columnif

8、 ( $index - $limit_start % $columns = $columns - 1 ) $output .= /tr;$output .= /table;return $nav . $output;这个表很简单，它从索引号 $limit_start 开始遍历图片列表。然后放上每个图片的缩略图，每五张图片作为一行。达到 $limit_start + $limit_step 的时候循环结束。该表是目录列表的可视化表示，因此需要一个函数列出目录中的所有图像。清单 1 中的 get_file_list() 函数用索引数组返回 /images 目录中的所有图片列表。下面是一个示例实现。

9、清单 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 imagesif ( getimagesize( $image_dir . / . $file ) ) $files = $file;$d-close();return $files;注意：本文后面还要

10、使用 get_file_list() 函数。有一点很重要，无论何时调用该函数，返回的数组都是不变的。因为提供的实现要进行目录搜索，必须保证目录中的指定文件不会改变，每次都要按字母顺序排序。导航的实现虽然表格列出了目录中的一些图像，但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行，则需要一套标准的链接：首页、上一页、下一页和尾页。清单 3. 分页器导航/ Append navigation$output = h4Showing items . $limit_start . - .min($limit_start + $limit_step - 1, count($images

11、) . 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, cou

12、nt($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() 函数，让用户将缩略图展开成完整的图

13、像（参见清单 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 ( $t

14、itle, $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 )

15、$images = get_image_list ( images );/ Generate navigation $output .= img src=images/ . $images$index . /;return $output;接下来还要提供与分页器类似的导航机制。“上一张” 导航到编号为 $index-1 的图像，“下一张” 导航到编号为 $index+1 的图像，“返回” 则回到分页器。清单 6. get_image 导航$output .= h4Viewing image . $index . of . count($images) . br /;if ( $index 0

16、) $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 | ;$ou

17、tput .= /h4; 最后创建一个简单的 HTML 容器，将其命名为 expand.php。清单 7. get_image 导航!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Strict/ENhttp:/www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtdhtml xmlns=http:/www.w3.org/1999/xhtmlheadtitleCreating a simple picture album viewer/titlestyle type=text/cssbody tex

18、t-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/headbody

19、h1Creating a simple picture album viewer/h1?php$index = isset($_REQUESTindex) ? $_REQUESTindex : 0;echo get_image($index);?/body/html 这样我们就完成了相册。用户可以看到所有的图片，而且很容易导航。自然，用户可以来回切换，甚至能通过书签功能返回喜欢的图片。 图 2. 完成的相册添加 Sajax现在相册提供了基本的导航功能，目录中的图像添加了索引。下面您将看到添加 Sajax 能够改进编程和用户体验。这里假设您对 Ajax 有基本的了解，最好还熟悉 Sajax 的基

20、础知识（请参阅 参考资料 中的教程）。Sajax、Ajax 与传统 Web 应用程序现在我们已经使用标准的 Web 开发模型开发了应用程序。两项主要功能是分页器和图像查看器，它们分别对应不同的 PHP 文件。参数作为 HTTP GET 请求传递给脚本，脚本直接向 Web 客户机返回页面。图 3. 在传统的 Web 应用程序中，三个不同的请求调用了两个页面Web 开发社区的人都知道，Ajax 允许向服务器发出异步的辅助请求，并直接在网页中显示结果（如图 4 所示）。不幸的是，即便最简单的 Ajax 应用程序实现起来也是一项大任务。因为 Ajax 不是标准化的技术，Internet Explore

21、r 和其他浏览器（如 Firefox、Safari）的实现是不同的。此外，程序员至少要编写三个函数才能实现一个功能，这三个函数是：发送 HTTP 请求的初始 JavaScript，返回响应的 PHP 脚本，以及另一个处理这些响应的 JavaScript 函数。图 4. Ajax 应用程序负责所有的 HTTP 请求建立在 Ajax 库之上的 Sajax 通过运用简单的启发式方法大大简化了这一过程：Web 客户机需要访问的每个 PHP 函数都由 Sajax “导出”。如果有一个名为 foo_bar() 的 PHP 函数，那么 Sajax 会把该函数导出为 JavaScript 函数 x_foo_b

22、ar()。客户机对 x_foo_bar() 的任何调用都会自动转发给服务器上的 foo_bar()，输出则传递给另一个 JavaScript 函数。清单 8 中的简短页面示范了这种功能。运行这个例子需要下载 Sajax 库（请参阅 参考资料）。 清单 8. Sajax 的应用?phprequire(Sajax.php);function foo_bar ( $param ) return You typed: $param;$sajax_request_type = GET; / Set HTTP request type to GETsajax_init(); / Prepare Sajax

23、sajax_export(foo_bar); / foo_bar can now be called by clientsajax_handle_client_request(); / Discussed below?htmlheadscript language=javascript? sajax_show_javascript(); ?/script/headbodyform onSubmit=x_foo_bar(this.input.value, alert);return false;input type=text name=input /form/body/html如果打开清单 8

24、中的页面，在输入框中输入一些内容然后单击 Enter，那么输入内容就会在一个警告框中显示出来。但在这个看似简单的网页背后，x_foo_bar() JavaScript 函数将远程调用 foo_bar() 函数，并把响应传递给 JavaScript 内置函数 alert()。每个 Sajax 导出函数的最后一个参数都是一个响应处理程序，负责处理 foo_bar() 的输出。这个例子还说明了 Sajax 快速开发的另一个重要特性：不需要每个函数都有一个单独的文件，页面实际上调用的是其自身，因此更便于跟踪函数的调用（如图 5 所示）。x_foo_bar() 函数直接向页面发回 Ajax 请求，在请求

25、中包含函数名和参数。关键是 sajax_handle_client_request() 函数，它截获所有的 Sajax 调用并自动对它们进行处理。图 5. 使用 Sajax 客户机可通过一个页面访问服务器端的多个函数将 Sajax 连接到相册利用刚刚创建的代码，我们将用 Sajax 迅速把相册从多页面应用程序转化成活动的 Ajax 应用程序。因为相册主要有两个函数，get_table() 和 get_image()，这也是需要用 Sajax 导出的全部函数。事实上，为了通过 Sajax 调用这些函数，这些函数本身基本上不需要修改，很快我们就会看到，我们只需要修改生成的链接即可。清单 9. Sa

26、jax 相册的头部?phprequire(Sajax.php);function get_image () / Defined laterfunction 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()

27、;?对于本文而言，文档主体部分很简单。我们将使用 div 和 window 的 id 来显示服务器的输出。清单 10. 显示服务器输出的 div 和 window idbodyh1Sajax photo album/h1div id=window/div/body最后还要编写 JavaScript 回调函数。该例中，因为所有的服务器输出都直接输出到 window div 标记，所以可以重复使用简单的回调函数。将回调函数添加到 Sajax 函数调用中，就可以得到头（head）。清单 11. 简单的头headtitleCreating a Sajax photo album/titlestyle

28、type=text/cssbody 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: 120pxpadding: 2px; border: 1px solid #ccc; img.full display: block; margin: 0 auto 0 auto;width: 300px; border: 1px solid #000 /stylescript language=javascript? sajax_show_javascript(); ?/ Outputs directly to the window divfunction to_window(output) document.getElementById(window).innerHTML = output;