结合AJAX进行PHP开发之入门

(){}//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.使用元数据的相册