结合AJAX进行PHP开发之入门.docx
《结合AJAX进行PHP开发之入门.docx》由会员分享，可在线阅读，更多相关《结合AJAX进行PHP开发之入门.docx（18页珍藏版）》请在冰豆网上搜索。
结合AJAX进行PHP开发之入门
异步JavaScript和XML（AsynchronousJavaScriptandXML，Ajax）无疑是最流行的新Web技术。
本文中我们将完全使用PHP和SimpleAjaxToolkit（Sajax）创建一个简单的相册作为在线Web应用程序。
我们首先用标准的PHP开发方法编写简单的相册，然后再用Sajax将其变成活动的Web应用程序。
创建一个简单的相册
本文将使用两种方法创建一个简单的相册：
传统的Web应用程序和基于Sajax的应用程序。
我们将用PHP编写一个相册，读取某一目录中的内容，显示缩略图组成的表格。
如果用户单击一个缩略图，就会完全展开该图像。
因为编写的是传统应用程序，所以每次单击都会是一个新的HTTP请求，而参数则作为URL的一部分传递。
您将学习如何将Sajax库应用于相册，了解为何使用Sajax可以加快应用程序的开发。
添加一个分页器表
访问相册的用户需要某种快速查看照片的方法。
因为很多大照片不容易在一页上显示，所以需要创建一个分页器——每次显示少量缩略图的简单表格。
还要编写导航，帮助用户在图像列表中来回移动。
图1.分页器提供了显示用户照片的一种方式
什么是OpenAjaxAlliance？
2006年5月JavaOneConference开始前，29家公司的代表在AdobeSystems的会议室里碰头，准备大体上确定Ajax的未来，这个小组就称为OpenAjaxAlliance。
小组做了几项决定，其中最显著的就是给自己取了个名字：
OpenAjaxAlliance。
它还决定不把自己组织成一个正式的标准团体，或者EclipseFoundation那样的开放源码主导的组织，因此小组自身的形式暂时也是非正式的。
小组同意大约每周召开一次电话会议。
OpenAjaxAlliance主要关注三个方面：
通过提供互操作性降低采用Ajax的风险，保证Ajax解决方案坚持走开放标准路线和使用开放源码技术，保持Web的开放性。
小组的第一项任务就是寻求建立和保持Ajax工具间互操作性的方法。
OpenAjaxAlliance包括31家技术公司，其中有IBM?
、AdobeSystems、EclipseFoundation、Google、LaszloSystemsInc.、Oracle、RedHatInc.和ZendTechnologiesLtd.。
首先要收集至少20幅.jpg图片，并将它们放到一个文件夹中。
每个图片还要有一个保存在单独缩略图文件夹中的缩略图。
虽然可使用GD软件包生成缩略图（请参阅参考资料），但本文假设已经准备好了缩略图。
也可使用本文提供的照片和缩略图（请参阅下载）。
为了完成本文的剩余部分，后面假设照片保存在/images子目录中，缩略图则放在/images/thumbnails中。
可以在代码中做适当的修改。
此外，我们还假定缩略图和对应的图像使用相同的名称。
分页器应该传递两个参数：
start是按照字母顺序显示的第一幅照片的索引号，step是显示的照片数。
清单1.相册查看器
/*
*Findalistofimagesin/imagesandprovidethumbnails
*/
functionget_table（$limit_start=0,$limit_step=5）{
$images=get_image_list（'images'）;
//GeneratenavigationforPreviousandNextbuttons
//Codegivenbelow
$output.='＜tableclass="image_table"＞';
$columns=5;
foreach（$imagesas$index=＞$image）{
//Begindirectorylistingatitemnumber$limit_start
if（$index＜$limit_start）continue;
//Enddirectorylistingatitemnumber$limit_end
if（$index＞=$limit_start+$limit_step）continue;
//Begincolumn
if（$index-$limit_start%$columns==0）{
$output.='＜tr＞';
}
//Generatelinktoblownupimage（seebelow）
$thumbnail='＜imgsrc="thumbnails/'.$image.'"/＞';
$output.='＜td＞'.get_image_link（$thumbnail,$index）.'＜/td＞';
//Closecolumn
if（$index-$limit_start%$columns==$columns-1）{
$output.='＜/tr＞';
}
}
$output.='＜/table＞';
return$nav.$output;
}
这个表很简单，它从索引号$limit_start开始遍历图片列表。
然后放上每个图片的缩略图，每五张图片作为一行。
达到$limit_start+$limit_step的时候循环结束。
该表是目录列表的可视化表示，因此需要一个函数列出目录中的所有图像。
清单1中的get_file_list（）函数用索引数组返回/images目录中的所有图片列表。
下面是一个示例实现。
清单2.get_file_list实现
functionget_image_list（$image_dir）{
$d=dir（$image_dir）;
$files=array（）;
if（!
$d）returnnull;
while（false!
==（$file=$d-＞read（）））{
//getimagesizereturnstrueonlyonvalidimages
if（@getimagesize（$image_dir.'/'.$file））{
$files[]=$file;
}
}
$d-＞close（）;
return$files;
}
注意：
本文后面还要使用get_file_list（）函数。
有一点很重要，无论何时调用该函数，返回的数组都是不变的。
因为提供的实现要进行目录搜索，必须保证目录中的指定文件不会改变，每次都要按字母顺序排序。
导航的实现
虽然表格列出了目录中的一些图像，但用户还需要一种查看表格中未出现的图片的方法。
要真正实现分页器的导行，则需要一套标准的链接：
首页、上一页、下一页和尾页。
清单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应用程序中，三个不同的请求调用了两个页面
Web开发社区的人都知道，Ajax允许向服务器发出异步的辅助请求，并直接在网页中显示结果（如图4所示）。
不幸的是，即便最简单的Ajax应用程序实现起来也是一项大任务。
因为Ajax不是标准化的技术，InternetExplorer和其他浏览器（如Firefox、Safari）的实现是不同的。
此外，程序员至少要编写三个函数才能实现一个功能，这三个函数是：
发送HTTP请求的初始JavaScript，返回响应的PHP脚本，以及另一个处理这些响应的JavaScript函数。
图4.Ajax应用程序负责所有的HTTP请求
建立在Ajax库之上的Sajax通过运用简单的启发式方法大大简化了这一过程：
Web客户机需要访问的每个PHP函数都由Sajax“导出”。
如果有一个名为foo_bar（）的PHP函数，那么Sajax会把该函数导出为JavaScript函数x_foo_bar（）。
客户机对x_foo_bar（）的任何调用都会自动转发给服务器上的foo_bar（），输出则传递给另一个JavaScript函数。
清单8中的简短页面示范了这种功能。
运行这个例子需要下载Sajax库（请参阅参考资料）。
清单8.Sajax的应用
＜?
php
require（"Sajax.php"）;
functionfoo_bar（$param）{
return"Youtyped:
$param";
}
$sajax_request_type="GET";//SetHTTPrequesttypetoGET
sajax_init（）;//PrepareSajax
sajax_export（"foo_bar"）;//foo_barcannowbecalledbyclient
sajax_handle_client_request（）;//Discussedbelow
?
＞
＜html＞
＜head＞
＜scriptlanguage="javascript"＞
＜?
sajax_show_javascript（）;?
＞
＜/script＞
＜/head＞
＜body＞
＜formonSubmit="x_foo_bar（this.input.value,alert）;returnfalse;"＞
＜inputtype="text"name="input"/＞
＜/form＞
＜/body＞
＜/html＞
如果打开清单8中的页面，在输入框中输入一些内容然后单击Enter，那么输入内容就会在一个警告框中显示出来。
但在这个看似简单的网页背后，x_foo_bar（）JavaScript函数将远程调用foo_bar（）函数，并把响应传递给JavaScript内置函数alert（）。
每个Sajax导出函数的最后一个参数都是一个响应处理程序，负责处理foo_bar（）的输出。
这个例子还说明了Sajax快速开发的另一个重要特性：
不需要每个函数都有一个单独的文件，页面实际上调用的是其自身，因此更便于跟踪函数的调用（如图5所示）。
x_foo_bar（）函数直接向页面发回Ajax请求，在请求中包含函数名和参数。
关键是sajax_handle_client_request（）函数，它截获所有的Sajax调用并自动对它们进行处理。
图5.使用Sajax客户机可通过一个页面访问服务器端的多个函数
将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;
升级会员 