结合Ajax进行PHP开发之入门(1)_PHP教程

php中文网

发布时间：2016-07-15 13:23:50

1224人浏览过

来源于php中文网

原创

异步 JavaScript 和 XML(Asynchronous JavaScript and XML，Ajax)无疑是最流行的新 Web 技术。“结合 Ajax 进行 PHP 开发” 这个系列包括两部分，我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册，然后再用 Sajax 将其变成活动的 Web 应用程序。

创建一个简单的相册

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

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

立即学习“PHP免费学习笔记（深入）”；

添加一个分页器表

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

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

结合Ajax进行PHP开发之入门(1)_PHP教程 javascript：return big(this)" style="max-width:90%" alt="分页器提供了显示用户照片的一种方式" src="http://www.bkjia.com/uploadfile/2013/0904/20130904094446269.jpg" width="450">

首先要收集至少 20 幅 .jpg 图片，并将它们放到一个文件夹中。每个图片还要有一个保存在单独缩略图文件夹中的缩略图。虽然可使用 GD 软件包生成缩略图，但本文假设已经准备好了缩略图。也可使用本文提供的照片和缩略图。

为了完成本文的剩余部分，后面假设照片保存在 /images 子目录中，缩略图则放在 /images/thumbnails 中。可以在代码中做适当的修改。此外，我们还假定缩略图和对应的图像使用相同的名称。

分页器应该传递两个参数:start 是按照字母顺序显示的第一幅照片的索引号，step 是显示的照片数。

清单 1. 相册查看器

/*
* Find a list of images in /images and provide thumbnails
*/
function get_table ( $limit_start = 0, $limit_step = 5 ) {
$images = get_image_list('images');

// Generate navigation for Previous and Next buttons
// Code given below

IBM Watson

IBM Watson文字转语音

下载

$output .= '

';
$columns = 5;
foreach ($images as $index => $image) {

// Begin directory listing at item number $limit_start
if ( $index

// End directory listing at item number $limit_end
if ( $index >= $limit_start + $limit_step ) continue;

// Begin column
if ( $index - $limit_start % $columns == 0 ) {
$output .= '

';
}

// Generate link to blown up image (see below)
$thumbnail = '@@##@@498)this.width=498;" onmousewheel="javascript：return big(this)" src="thumbnails/'%20.%20%24image%20.%20'">';
$output .= '

';
// Close column
if ( $index - $limit_start % $columns == $columns - 1 ) {
$output .= '';
}
}
$output .= '

' . get_image_link($thumbnail, $index)
. '

';
return $nav . $output;
}

这个表很简单，它从索引号 $limit_start 开始遍历图片列表。然后放上每个图片的缩略图，每五张图片作为一行。达到 $limit_start + $limit_step 的时候循环结束。

该表是目录列表的可视化表示，因此需要一个函数列出目录中的所有图像。清单 1 中的 get_file_list() 函数用索引数组返回 /images 目录中的所有图片列表。下面是一个示例实现。

清单 2. get_file_list 实现

function get_image_list ( $image_dir ) {
$d = dir($image_dir);
$files = array();
if ( !$d ) return null;

while (false !== ($file = $d->read())) {
// getimagesize returns true only on valid images
if ( @getimagesize( $image_dir . '/' . $file ) ) {
$files[] = $file;
}
}
$d->close();
return $files;
}

注意:本文后面还要使用 get_file_list() 函数。有一点很重要，无论何时调用该函数，返回的数组都是不变的。因为提供的实现要进行目录搜索，必须保证目录中的指定文件不会改变，每次都要按字母顺序排序。 1