蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网络编程 >> PHP >> 正文

结合AJAX进行PHP开发之入门

作者:佚名    文章来源:网络转载    更新时间:2007-11-26 23:45:58
异步 javascript 和 XML(Asynchronous javascript and XML,Ajax)无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册,然后再用 Sajax 将其变成活动的 Web 应用程序。

  创建一个简单的相册

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

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

  添加一个分页器表

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

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

  什么是 OpenAjax Alliance?

  2006 年 5 月 JavaOne Conference 开始前,29 家公司的代表在 Adobe Systems 的会议室里碰头,准备大体上确定 Ajax 的未来,这个小组就称为 OpenAjax Alliance。

  小组做了几项决定,其中最显著的就是给自己取了个名字:OpenAjax Alliance。它还决定不把自己组织成一个正式的标准团体,或者 Eclipse Foundation 那样的开放源码主导的组织,因此小组自身的形式暂时也是非正式的。小组同意大约每周召开一次电话会议。

  OpenAjax Alliance 主要关注三个方面:通过提供互操作性降低采用 Ajax 的风险,保证 Ajax 解决方案坚持走开放标准路线和使用开放源码技术,保持 Web 的开放性。小组的第一项任务就是寻求建立和保持 Ajax 工具间互操作性的方法。

  OpenAjax Alliance 包括 31 家技术公司,其中有 IBM?、Adobe Systems、Eclipse Foundation、Google、Laszlo Systems Inc.、Oracle、Red Hat Inc. 和 Zend Technologies Ltd.。

  首先要收集至少 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

 $output .= '<table class="image_table">';
 $columns = 5;
 foreach ($images as $index => $image) {

  // Begin directory listing at item number $limit_start
  if ( $index < $limit_start ) continue;

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

  // Begin column
  if ( $index - $limit_start % $columns == 0 ) {
   $output .= '<tr>';
  }

  // Generate link to blown up image (see below)
  $thumbnail = '<img src="thumbnails/' . $image . '" />';
  $output .= '<td>' . get_image_link($thumbnail, $index) . '</td>';

  // Close column
  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 实现

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() 函数。有一点很重要,无论何时调用该函数,返回的数组都是不变的。因为提供的实现要进行目录搜索,必须保证目录中的指定文件不会改变,每次都要按字母顺序排序。

 导航的实现

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

  清单 3. 分页器导航

// Append navigation
$output = '<h4>Showing items ' . $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';
}

// Append next button
$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 实现

function get_table_link ( $title, $start, $step ) {

[1] [2] [3] 下一页


发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★