结合AJAX进行PHP开发之入门

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

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

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

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

  最后还要编写get_image_link()和get_table_link()函数,让用户将缩略图展开成完整的图像(参见清单4)。注意,脚本index.php(以及后面要创建的expand.php)只在这两个函数中调用。这样就很容易改变链接的功能。事实上在下面与Sajax进行集成时,只有这两个函数需要修改。

  现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是允许用户单击缩略图来查看全图。get_image_link()函数调用了expand.php脚本,我们现在就来编写它。该脚本传递用户希望展开的文件的索引,因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了,只需创建病输出image标记即可。

  接下来还要提供与分页器类似的导航机制。“上一张”导航到编号为$index-1的图像,“下一张”导航到编号为$index+1的图像,“返回”则回到分页器。

  这样我们就完成了相册。用户可以看到所有的图片,而且很容易导航。自然,用户可以来回切换,甚至能通过书签功能返回喜欢的图片。

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

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

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

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

相关阅读