异步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(){}//Definedlater
functionget_thumbs_table(){}//Definedlater

//StandardSajaxstuff.UseGet,andexporttwo
//mainfunctionstojavascript
$sajax_request_type="GET";
sajax_init();
sajax_export("get_thumbs_table","get_image");
sajax_handle_client_request();
?＞
对于本文而言，文档主体部分很简单。我们将使用div和window的id来显示服务器的输出。

清单10.显示服务器输出的div和windowid

  ＜body＞
＜h1＞Sajaxphotoalbum＜/h1＞
＜divid="window"＞＜/div＞
＜/body＞
最后还要编写JavaScript回调函数。该例中，因为所有的服务器输出都直接输出到windowdiv标记，所以可以重复使用简单的回调函数。将回调函数添加到Sajax函数调用中，就可以得到头（head）。

清单11.简单的头

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

＜scriptlanguage="javascript"＞
＜?sajax_show_javascript();?＞

//Outputsdirectlytothe"window"div
functionto_window(output){
　document.getElementById("window").innerHTML=output;
}

window.onload=function(){
　xgettabletowindow);
};

＜/script＞
＜/head＞
最后一步是保证应用程序中的所有链接都是自定义的Sajax调用。只需要取上一节中的代码并作如下替换：href="index.php?start=0&step=5"变为，href="expand.php?index=0"变为。

并在相应的函数中做同样修改：get_image_link()和get_table_link()。这样向Sajax的转化就完成了（如图6所示）。所有链接都变成了与远程PHP调用对应的JavaScript调用，PHP使用JavaScript响应处理程序to_window()直接输出到页面。

整个应用程序都包含在一个页面中，还可以把其余功能（get_table()、get_image()等）放在不能从Web访问的单独的库文件中。在大多数Ajax应用程序中，每个发往服务器的请求都需要由单独的脚本处理，或至少需要编写一个非常庞大的处理程序脚本来重定向请求。将所有这些文件都集中到一起可能非常麻烦。使用Sajax永远只需要一个文件，在该文件中只需定义我们使用的函数即可。Sajax代替了处理程序脚本。

 
图6.完成的基于Sajax的相册（缩略图）

 

扩展相册

使用Sajax把我们的相册变成活动的Web应用程序如此轻而易举，我们要再花点时间添加一些功能，进一步说明Sajax如何使从服务器检索数据变得完全透明。我们将为相册添加元数据功能，这样用户就能为他们的图片添加说明。

元数据

没有上下文说明的相册是不完整的，比如照片的来源、作者等。为此我们要将图像集中起来创建一个简单的XML文件。根节点是gallery，它包含任意多个photo节点。每个photo节点都通过其file属性来编号。在photo节点中可以使用任意多个标记来描述照片，但本例中只使用了date、locale和comment。

清单12.包含元数据的XML文件

  ＜?xmlversion="1.0"?＞
＜gallery＞
　＜photofile="image01.jpg"＞
＜date＞August6,2006＜/date＞
＜locale＞LosAngeles,CA＜/locale＞
＜comment＞Here'saphotoofmyfavoritecelebrity＜/comment＞
　＜/photo＞
　＜photofile="image02.jpg"＞
＜date＞August7,2006＜/date＞
＜locale＞SanFrancisco,CA＜/locale＞
＜comment＞InSF,wegottoridethestreetcars＜/comment＞
　＜/photo＞
　＜photofile="image03.jpg"＞
＜date＞August8,2006＜/date＞
＜locale＞Portland,OR＜/locale＞
＜comment＞Timetoendourroadtrip!＜/comment＞
　＜/photo＞
＜/gallery＞
文件的解析不在本文讨论范围之列。我们假设您能够熟练使用PHP中众多XML解析方法中的一种。如果不熟悉的话，建议阅读参考资料中的文章。我们不再浪费时间解释如何将该文件转化成HTML，作为一个练习，读者可以自己了解下面的代码如何使用XML文件并生成HTML。清单13中的代码使用了PHPV5中自带的SimpleXML包。

清单13.元数据函数

  functionget_meta_data($file){

　//Usinggetimagesize,theservercalculatesthedimensions
　list($width,$height)=@getimagesize("images/$file");
　$output="＜p＞Width:{$width}px,Height:{$height}px＜/p＞";

　//UseSimpleXMLpackageinPHP_v5:
　//http://us3.php.net/manual/en/ref.simplexml.php
　$xml=simplexml_load_file("gallery.xml");

　foreach($xmlas$photo){
if($photo['id']==$file){
　$output.=!empty($photo-＞date)?"＜p＞Datetaken:{$photo-＞date}＜/p＞":'';
　$output.=!empty($photo-＞locale)?"＜p＞Location:{$photo-＞locale}＞/p＞":'';
　$output.=!empty($photo-＞comment)?"＜p＞Comment:{$photo-＞comment}＜/p＞":'';
}
　}
　return$output;
要注意的是，get_meta_data()函数中还使用getimagesize()（一个核心PHP函数，不需要GD）计算图像的大小。

再回到get_image()函数，它包含由get_image_list()生成的文件名的列表。查找元数据只需要将文件名传递给该函数即可。

清单14.添加元数据

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

　//...

　$output.='＜imgsrc="images/'.$images[$index].'"/＞';
　$output.='＜divid="meta_data"＞'.
　get_meta_data($images[$index]).'＜/div＞';
　return$output;
}
重新打开页面将看到服务器请求的结果。图7显示了带有元数据的放大的图像。

 
图7.使用元数据的相册

评论 (0) All

登陆 还没注册？