结合AJAX进行PHP开发之入门

2008-09-09 10:07 稿源:互联网  0条评论
异步JavaScript和XML(AsynchronousJavaScriptandXML,Ajax)无疑是最流行的新Web技术。本文中我们将完全使用PHP和SimpleAjaxToolkit(Sajax)创建一个简单的相册作为在线Web应用程序。我们首先用标准的PHP开发方法编写简单的相册,然后再用Sajax将其变成活动的Web应用程序。

创建一个简单的相册

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

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

添加一个分页器表

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

 
图1.分页器提供了显示用户照片的一种方式#p#分页标题#e#

 

导航的实现

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

清单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.完成的相册#p#分页标题#e#

 

添加Sajax

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

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

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

 
图3.在传统的Web应用程序中,三个不同的请求调用了两个页面#p#分页标题#e#

 

将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的相册(缩略图)#p#分页标题#e#

 

扩展相册

使用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.使用元数据的相册

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多