结合AJAX进行PHP开发之入门

异步JavaScript和XML（AsynchronousJavaScriptandXML，Ajax）无疑是最流行的新Web技术。本文中我们将完全使用PHP和SimpleAjaxToolkit(Sajax)创建一个简单的相册作为在线Web应用程序。我们首先用标准的PHP开发方法编写简单的相册，然后再用Sajax将其变成活动的Web应用程序。

创建一个简单的相册

本文将使用两种方法创建一个简单的相册：传统的Web应用程序和基于Sajax的应用程序。我们将用PHP编写一个相册，读取某一目录中的内容，显示缩略图组成的表格。如果用户单击一个缩略图，就会完全展开该图像。因为编写的是传统应用程序，所以每次单击都会是一个新的HTTP请求，而参数则作为URL的一部分传递。

您将学习如何将Sajax库应用于相册，了解为何使用Sajax可以加快应用程序的开发。

添加一个分页器表

访问相册的用户需要某种快速查看照片的方法。因为很多大照片不容易在一页上显示，所以需要创建一个分页器——每次显示少量缩略图的简单表格。还要编写导航，帮助用户在图像列表中来回移动。

 
图1.分页器提供了显示用户照片的一种方式导航的实现

虽然表格列出了目录中的一些图像，但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行，则需要一套标准的链接：首页、上一页、下一页和尾页。

清单3.分页器导航

 //Appendnavigation
$output='＜h4＞Showingitems'.$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';
}

//Appendnextbutton
$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实现

 functionget_table_link($title,$start,$step){
　$link="index.php?start=$start&step=$step";
　return'＜ahref="'.$link.'"＞'.$title.'＜/a＞';
}

functionget_image_link($title,$index){
　$link="expand.php?index=$index";
　return'＜ahref="'.$link.'"＞'.$title.'＜/a＞';
}
放大图片

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

清单5.get_image函数

 functionget_image($index){
　$images=get_image_list('images');

　//Generatenavigation

　$output.='＜imgsrc="images/'.$images[$index].'"/＞';
　return$output;
}
接下来还要提供与分页器类似的导航机制。“上一张”导航到编号为$index-1的图像，“下一张”导航到编号为$index+1的图像，“返回”则回到分页器。

清单6.get_image导航

 $output.='＜h4＞Viewingimage'.$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导航

 ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞
＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞Creatingasimplepicturealbumviewer＜/title＞

＜styletype="text/css"＞
body{text-align:center}
table.image_table{margin:0auto0auto;width:700px;
padding:10px;border:1pxsolid#ccc;background:#eee;}
table.image_tabletd{padding:5px}
table.image_tablea{display:block;}
table.image_tableimg{display:block;width:120px;
padding:2px;border:1pxsolid#ccc;}
＜/style＞

＜/head＞
＜body＞

＜h1＞Creatingasimplepicturealbumviewer＜/h1＞
＜?php

$index=isset($_REQUEST['index'])?$_REQUEST['index']:0;
echoget_image($index);

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

 
图2.完成的相册添加Sajax

现在相册提供了基本的导航功能，目录中的图像添加了索引。下面您将看到添加Sajax能够改进编程和用户体验。

这里假设您对Ajax有基本的了解，最好还熟悉Sajax的基础知识（请参阅参考资料中的教程）。

Sajax、Ajax与传统Web应用程序
　
现在我们已经使用标准的Web开发模型开发了应用程序。两项主要功能是分页器和图像查看器，它们分别对应不同的PHP文件。参数作为HTTPGET请求传递给脚本，脚本直接向Web客户机返回页面。

 
图3.在传统的Web应用程序中，三个不同的请求调用了两个页面将Sajax连接到相册

利用刚刚创建的代码，我们将用Sajax迅速把相册从多页面应用程序转化成活动的Ajax应用程序。

因为相册主要有两个函数，get_table()和get_image()，这也是需要用Sajax导出的全部函数。事实上，为了通过Sajax调用这些函数，这些函数本身基本上不需要修改，很快我们就会看到，我们只需要修改生成的链接即可。

清单9.Sajax相册的头部

 ＜?php
require("Sajax.php");

functionget_image