结合AJAX进行PHP开发之进门
核心提示：异步JavaScript和XML（AsynchronousJavaScriptandXML，Ajax）无疑是最流行的新Web技术。本文中我们将完全使用PHP和SimpleAjaxToolkit(Sajax)创建1个简单的相册作为在线Web利用程序。我们首先用标准的PHP开发方法编写简单的相册，然后再用Sajax将其变成活动的Web利用程
异步JavaScript和XML（AsynchronousJavaScriptandXML，Ajax）无疑是最流行的新Web技术。本文中我们将完全使用PHP和SimpleAjaxToolkit(Sajax)创建1个简单的相册作为在线Web利用程序。我们首先用标准的PHP开发方法编写简单的相册，然后再用Sajax将其变成活动的Web利用程序。创建1个简单的相册
本文将使用两种方法创建1个简单的相册：传统的Web利用程序和基于Sajax的利用程序。我们将用PHP编写1个相册，读取某1目录中的内容，显示缩略图组成的表格。假设用户单击1个缩略图，就会完全展开该图象。由于编写的是传统利用程序，所以每次单击都会是1个新的HTTP要求，而参数则作为URL的1部份传递。
您将学习如何将Sajax库利用于相册，了解为甚么使用Sajax可以加快利用程序的开发。
添加1个分页器表
访问相册的用户需要某种快速查看照片的方法。由于很多大照片不轻易在1页上显示，所以需要创建1个分页器——每次显示少许缩略图的简单表格。还要编写导航，帮助用户在图象列表中来回移动。
图1.分页器提供了显示用户照片的1种方式#p#分页标题#e#
导航的实现
固然表格列出了目录中的1些图象，但用户还需要1种查看表格中未出现的图片的方法。要真正实现分页器的导行，则需要1套标准的链接：首页、上1页、下1页和尾页。
清单3.分页器导航
$output='＜h4＞Showingitems'.$limit_start.'-'.
min($limit_start+$limit_step⑴,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实现
$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＞';
}
放大图片
现在有了1个可用的分页器为用户提供1些缩略图。相册的第2项功能是答利用户单击缩略图来查看全图。get_image_link()函数调用了expand.php脚本，我们现在就来编写它。该脚本传递用户希看展开的文件的索引，因此必须在此列出目录并取得适当的文件名。随后的操纵就很简单了，只需创建病输出image标记即可。
清单5.get_image函数
$images=get_image_list('images');
//Generatenavigation
$output.='＜imgsrc="images/'.$images[$index].'"/＞';
return$output;
}
接下来还要提供与分页器类似的导航机制。“上1张”导航到编号为$index⑴的图象，“下1张”导航到编号为$index+1的图象，“返回”则回到分页器。
清单6.get_image导航
if($index＞0){
$output.=get_image_link('＜＜',0);
$output.='|'.get_image_link('Prev',$index⑴);
}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＞';
最后创建1个简单的HTML容器，将其命名为expand.php。
清单7.get_image导航
"http://www.w3.org/TR/2000/REC-xhtml1⑵0000126/DTD/xhtml1-strict.dtd"＞
＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞Creatinga***picturealbumviewer＜/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＞Creatinga***picturealbumviewer＜/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利用程序中，3个不同的要求调用了两个页面#p#分页标题#e#
将Sajax连接到相册
利用刚刚创建的代码，我们将用Sajax迅速把相册从多页面利用程序转化成活动的Ajax利用程序。
由于相册主要有两个函数，get_table()和get_image()，这也是需要用Sajax导出的全部函数。事实上，为了通过Sajax调用这些函数，这些函数本身基本上不需要修改，很快我们就会看到，我们只需要修改天生的链接即可。
清单9.Sajax相册的头部
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
＜h1＞Sajaxphotoalbum＜/h1＞
＜divid="window"＞＜/div＞
＜/body＞
最后还要编写JavaScript回调函数。该例中，由于所有的服务器输出都直接输出到windowdiv标记，所以可以重复使用简单的回调函数。将回调函数添加到Sajax函数调用中，便可以够得到头（head）。
清单11.简单的头
＜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＞
最后1步是保证利用程序中的所有链接都是自定义的Sajax调用。只需要取上1节中的代码并作以下替换：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()直接输出到页面。
全部利用程序都包括在1个页面中，还可以把其余功能（get_table()、get_image()等）放在不能从Web访问的单独的库文件中。在大多数Ajax利用程序中，每个发往服务器的要求都需要由单独的脚本处理，或最少需要编写1个非常庞大的处理程序脚本来重定向要求。将所有这些文件都集中到1起可能非常麻烦。使用Sajax永久只需要1个文件，在该文件中只需定义我们使用的函数即可。Sajax代替了处理程序脚本。
图6.完成的基于Sajax的相册（缩略图）#p#分页标题#e#
扩大相册
使用Sajax把我们的相册变成活动的Web利用程序如此轻而易举，我们要再花点时间添加1些功能，进1步说明Sajax如何使从服务器检索数据变得完全透明。我们将为相册添加元数据功能，这样用户便可以为他们的图片添加说明。
元数据
没有上下文说明的相册是不完全的，比如照片的来源、作者等。为此我们要将图象集中起来创建1个简单的XML文件。根节点是gallery，它包括任意多个photo节点。每个photo节点都通过其file属性来编号。在photo节点中可使用任意多个标记来描写照片，但本例中只使用了date、locale和comment。
清单12.包括元数据的XML文件
＜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解析方法中的1种。假设不熟习的话，建议浏览参考资料中的文章。我们不再浪费时间解释如何将该文件转化成HTML，作为1个练习，读者可以自己了解下面的代码如何使用XML文件并天生HTML。清单13中的代码使用了PHPV5中自带的SimpleXML包。
清单13.元数据函数
//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.***xml.php
$xml=***xml_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()（1个核心PHP函数，不需要GD）计算图象的大小。
再回到get_image()函数，它包括由get_image_list()天生的文件名的列表。查找元数据只需要将文件名传递给该函数即可。
清单14.添加元数据
$images=get_image_list('images');
//...
$output.='＜imgsrc="images/'.$images[$index].'"/＞';
$output.='＜divid="meta_data"＞'.
get_meta_data($images[$index]).'＜/div＞';
return$output;
}
重新打开页面将看到服务器要求的结果。图7显示了带有元数据的放大的图象。
图7.使用元数据的相册 http://www.fw8.net/
TAG:程序,函数,图象,清单,相册
|
评论加载中...
|
上一篇: 网上第1Mail服务器防垃圾邮件处理
邮 箱：admin@fw8.net 