异步javascript和XML（AsynchronousjavascriptandXML，Ajax）无疑是最流行的新Web技术。本文中我们将完全使用PHP和SimpleAjaxToolkit(Sajax)创建一个简单的相册作为在线Web应用程序。我们首先用标准的PHP开发方法编写简单的相册，然后再用Sajax将其变成活动的Web应用程序。 创建一个简单的相册 本文将使用两种方法创建一个简单的相册：传统的Web应用程序和基于Sajax的应用程序。我们将用PHP编写一个相册，读取某一目录中的内容，显示缩略图组成的表格。如果用户单击一个缩略图，就会完全展开该图像。因为编写的是传统应用程序，所以每次单击都会是一个新的HTTP请求，而参数则作为URL的一部分传递。 您将学习如何将Sajax库应用于相册，了解为何使用Sajax可以加快应用程序的开发。 添加一个分页器表 访问相册的用户需要某种快速查看照片的方法。因为很多大照片不容易在一页上显示，所以需要创建一个分页器——每次显示少量缩略图的简单表格。还要编写导航，帮助用户在图像列表中来回移动。 导航的实现 虽然表格列出了目录中的一些图像，但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行，则需要一套标准的链接：首页、上一页、下一页和尾页。 清单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;}
|
