编辑“Php-ajax简单示例”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[PHP#PHP教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>
==xAjax的使用步骤==

xajax是一个开源的、针对PHP的Ajax代码库。它的使用不算太难，从官方的说明来看，只需要七步就可以了: <br>

首先，在php文件头包含xajax类 <br>

require_once("xajax.inc.php");  <br>
接下来，创建xajax对象 <br>

$xajax = new xajax();  <br>
注册你的函数。这个函数用于在服务器端处理相应的客户端请求，并返回指定内容。 <br>

$xajax->registerFunction("myFunction");  <br>
编写上述函数的代码。根据你要执行的功能 <br>

function myFunction($arg)  <br>
{ 
  // 在函数中使用从服务器或客户端得到的参数。  <br>
  $newContent = $arg;  <br>
    
  // 创建xajaxResponse对象。  <br>
  // 这个是用于被客户端调用并返回相应内容的函数中所必须定义的。  <br>
  $objResponse = new xajaxResponse();  <br>
    
  // 使用xajaxResponse对象中的方法，执行不同的操作。  <br>
  $objResponse->addAssign("SomeElementId","innerHTML", $newContent);  <br>
    
  // 向客户端返回内容。  <br>
  // 客户端的页面将在不刷新的情况下被重写。  <br>
  return $objResponse->getXML();  <br>
}  <br>
打开请求控制器，所以请求都将交由xajax系统来处理。 <br>
  
$xajax->processRequests();  <br>
在”head”标签中加入下列代码，用于在页面中生成必要的Javascript脚本。 <br>

<?php $xajax->printJavascript(); ?> <br>
最后，在页面中有事件发生时，调用你在服务器端定义的函数来进行处理就可以了。这里是名为myFunction的函数。注意，调用时，函数前必须加xajax_前缀。 <br>

<div id="SomeElementId"></div>   <br>
<button onclick="xajax_myFunction(SomeArgument);">   <br>
这样，一个具有流行的Ajax效果的页面的做好了。怎么样，不复杂吧? 实际上，xajax还提供大量的方法，利用它们，你就可以很容易对页面进行操作了。  <br>


----

==Ajax简单实例==
异步 Javascript 和 XML（Asynchronous Javascript and XML，Ajax）无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册，然后再用 Sajax 将其变成活动的 Web 应用程序。

结合AJAX进行PHP开发之入门(1)异步 Javascript 和 XML（Asynchronous Javascript and XML，Ajax）无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册，然后再用 Sajax 将其变成活动的 Web 应用程序。

　　创建一个简单的相册  <br>

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

添加一个分页器表 <br>

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





----

== 什么是 OpenAjax Alliance ==


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


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


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


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


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


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


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


----

　　
== 清单 ==
 1. 相册查看器<br>


/*<br>

* Find a list of images in /images and provide thumbnails<br>

*/<br>

function get_table ( $limit_start = 0, $limit_step = 5 ) {<br>

　$images = get_image_list('images');<br>


　// Generate navigation for Previous and Next buttons<br>

　// Code given below<br>


　$output .= '＜table class="image_table"＞';<br>

　$columns = 5;<br>

　foreach ($images as $index =＞ $image) {<br>


　　// Begin directory listing at item number $limit_start<br>

　　if ( $index ＜ $limit_start ) continue;<br>


　　// End directory listing at item number $limit_end<br>

　　if ( $index ＞= $limit_start + $limit_step ) continue;<br>


　　// Begin column<br>

　　if ( $index - $limit_start % $columns == 0 ) {<br>

　　　$output .= '＜tr＞';<br>

　　}<br>


　　// Generate link to blown up image (see below)<br>

　　$thumbnail = '＜img src="thumbnails/' . $image . '" /＞';<br>

　　$output .= '＜td＞' . get_image_link($thumbnail, $index) . '＜/td＞';<br>


　　// Close column<br>

　　if ( $index - $limit_start % $columns == $columns - 1 ) {<br>

　　　$output .= '＜/tr＞';<br>

　　}<br>

　}<br>


　$output .= '＜/table＞';<br>


　return $nav . $output;<br>

} <br>


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


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


　　清单 2. get_file_list 实现<br>


function get_image_list ( $image_dir ) {<br>

　$d = dir($image_dir);<br>

　$files = array();<br>

　if ( !$d ) return null;<br>


　while (false !== ($file = $d-＞read())) {<br>

　　// getimagesize returns true only on valid images<br>

　　if ( @getimagesize( $image_dir . '/' . $file ) ) {<br>

　　　$files[] = $file;<br>

　　} <br>

　} <br>

　$d-＞close(); <br>

　return $files; <br>

}  <br>


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



----

== 导航的实现 ==


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

分页器导航<br>

// Append navigation<br>
$output = '＜h4＞Showing items ' . $limit_start . '-' .<br>
min($limit_start + $limit_step - 1, count($images)) .<br>
' of ' . count($images) . '＜br /＞';<br>

$prev_start = max(0, $limit_start - $limit_step);<br>
if ( $limit_start ＞ 0 ) {<br>
　$output .= get_table_link('＜＜', 0, $limit_step);<br>
　$output .= ' | ' . get_table_link('Prev',<br>
　$prev_start, $limit_step);<br>
} else {<br>
　$output .= '＜＜ | Prev';<br>
}<br>

// Append next button<br>
$next_start = min($limit_start + $limit_step, count($images));<br>
if ( $limit_start + $limit_step ＜ count($images) ) {<br>
　$output .= ' | ' . get_table_link('Next',$next_start, $limit_step);<br>
　$output .= ' | ' . get_table_link('＞＞',(count($images) - $limit_step), $limit_step);<br>
} else {<br>
　$output .= ' | Next | ＞＞';<br>
}<br>

$output .= '＜/h4＞'; <br>

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

get_image_link、get_table_link 实现<br>

function get_table_link ( $title, $start, $step ) {<br>
　$link = "index.php?start=$start&step=$step";<br>
　return '＜a href="' . $link . '"＞' . $title .'＜/a＞';<br>
}<br>

function get_image_link ( $title, $index ) {<br>
　$link = "expand.php?index=$index";<br>
　return '＜a href="' . $link . '"＞' . $title . '＜/a＞'; <br>
}  <br>
　放大图片  <br>

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

get_image 函数 <br>

function get_image ( $index ) { <br>
　$images = get_image_list ( 'images' ); <br>

　// Generate navigation   <br>
　$output .= '＜img src="images/' . $images[$index] . '" /＞'; <br>
　return $output; <br>
}  <br>

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

get_image 导航<br>

$output .= '＜h4＞Viewing image ' . $index .' of ' . count($images) . '＜br /＞';<br>

if ( $index ＞ 0 ) {<br>
　$output .= get_image_link('＜＜', 0);<br>
　$output .= ' | ' . get_image_link('Prev', $index-1);<br>
} else {<br>
　$output .= '＜＜ | Prev';<br>
}<br>

$output .= ' | ' . get_table_link('Up', $index, 5);<br>

if ( $index ＜ count($images) ) {<br>
　$output .= ' | ' . get_image_link('Next', $index+1);<br>
　$output .= ' | ' . get_image_link('＞＞', count($images));<br>
} else {<br>
　$output .= ' | Next | ＞＞';<br>
}<br>

$output .= '＜/h4＞';  <br>

　　最后创建一个简单的 HTML 容器，将其命名为 expand.php。  <br>

get_image 导航<br>


＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞<br>

＜html xmlns="http://www.w3.org/1999/xhtml"＞<br>

＜head＞<br>

＜title＞Creating a simple picture album viewer＜/title＞<br>


＜style type="text/css"＞<br>

body { text-align: center }<br>

table.image_table { margin: 0 auto 0 auto; width: 700px;<br>

padding:10px; border: 1px solid #ccc; background: #eee; }<br>

table.image_table td { padding: 5px }<br>

table.image_table a { display: block; }<br>

table.image_table img { display: block; width: 120px;<br>

padding: 2px; border: 1px solid #ccc; }<br>

＜/style＞<br>


＜/head＞<br>

＜body＞<br>


＜h1＞Creating a simple picture album viewer＜/h1＞<br>

＜?php<br>


$index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0;<br>

echo get_image($index);<br>


?＞<br>

＜/body＞<br>

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



----

== 添加 Sajax ==


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

　　这里假设您对 Ajax 有基本的了解，最好还熟悉 Sajax 的基础知识。 <br>

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


　　Web 开发社区的人都知道，Ajax 允许向服务器发出异步的辅助请求，并直接在网页中显示结果（如图 4 所示）。不幸的是，即便最简单的 Ajax 应用程序实现起来也是一项大任务。因为 Ajax 不是标准化的技术，Internet Explorer 和其他浏览器（如 Firefox、Safari）的实现是不同的。此外，程序员至少要编写三个函数才能实现一个功能，这三个函数是：发送 HTTP 请求的初始 Javascript，返回响应的 PHP 脚本，以及另一个处理这些响应的 Javascript 函数。<br>


　　建立在 Ajax 库之上的 Sajax 通过运用简单的启发式方法大大简化了这一过程：Web 客户机需要访问的每个 PHP 函数都由 Sajax “导出”。如果有一个名为 foo_bar() 的 PHP 函数，那么 Sajax 会把该函数导出为 Javascript 函数 x_foo_bar()。客户机对 x_foo_bar() 的任何调用都会自动转发给服务器上的 foo_bar()，输出则传递给另一个 Javascript 函数。清单 8 中的简短页面示范了这种功能。运行这个例子需要下载 Sajax 库。 <br>


Sajax 的应用 <br>

＜?php <br>
require("Sajax.php"); <br>

function foo_bar ( $param ) { <br>
　return "You typed: $param"; <br>
} <br>

$sajax_request_type = "GET"; // Set HTTP request type to GET <br>
sajax_init(); // Prepare Sajax <br>
sajax_export("foo_bar"); // foo_bar can now be called by client <br>
sajax_handle_client_request(); // Discussed below <br>
?＞ <br>
＜html＞ <br>
＜head＞ <br>
＜script language="javascript"＞ <br>
＜? sajax_show_javascript(); ?＞ <br>
＜/script＞ <br>
＜/head＞ <br>
＜body＞ <br>
＜form ＞ <br>
＜input type="text" name="input" /＞ <br>
＜/form＞ <br>
＜/body＞ <br>
＜/html＞   <br>


如果打开Sajax 的应用 的页面，在输入框中输入一些内容然后单击 Enter，那么输入内容就会在一个警告框中显示出来。但在这个看似简单的网页背后，x_foo_bar() Javascript 函数将远程调用 foo_bar() 函数，并把响应传递给 Javascript 内置函数 alert()。每个 Sajax 导出函数的最后一个参数都是一个响应处理程序，负责处理 foo_bar() 的输出。 <br>

　　这个例子还说明了 Sajax 快速开发的另一个重要特性：不需要每个函数都有一个单独的文件，页面实际上调用的是其自身，因此更便于跟踪函数的调用（如图 5 所示）。x_foo_bar() 函数直接向页面发回 Ajax 请求，在请求中包含函数名和参数。关键是 sajax_handle_client_request() 函数，它截获所有的 Sajax 调用并自动对它们进行处理。  <br>



----
== 将 Sajax 连接到相册 ==
 

　　利用刚刚创建的代码，我们将用 Sajax 迅速把相册从多页面应用程序转化成活动的 Ajax 应用程序。 <br>

　　因为相册主要有两个函数，get_table() 和 get_image()，这也是需要用 Sajax 导出的全部函数。事实上，为了通过 Sajax 调用这些函数，这些函数本身基本上不需要修改，很快我们就会看到，我们只需要修改生成的链接即可。 <br>

Sajax 相册的头部 <br>

＜?php<br>
require("Sajax.php");  <br>

function get_image () { } // Defined later <br>
function get_thumbs_table () { } // Defined later <br>

// Standard Sajax stuff. Use Get, and export two <br>
// main functions to javascript <br>
$sajax_request_type = "GET"; <br>
sajax_init(); <br>
sajax_export("get_thumbs_table", "get_image"); <br>
sajax_handle_client_request(); <br>
?＞  <br>

　　对于本文而言，文档主体部分很简单。我们将使用 div 和 window 的 id 来显示服务器的输出。  <br>

 显示服务器输出的 div 和 window id <br>

 
＜body＞ <br>

＜h1＞Sajax photo album＜/h1＞ <br>

＜div id="window"＞＜/div＞ <br>

＜/body＞  <br>


　　最后还要编写 Javascript 回调函数。该例中，因为所有的服务器输出都直接输出到 window div 标记，所以可以重复使用简单的回调函数。将回调函数添加到 Sajax 函数调用中，就可以得到头（head）。  <br>


简单的头 <br>
 
＜head＞ <br>
＜title＞Creating a Sajax photo album＜/title＞ <br>
＜style type="text/css"＞ <br>
body { text-align: center } <br>
div#window { margin: 0 auto 0 auto; width: 700px; <br>
padding: 10px; border: 1px solid #ccc; background: #eee; } <br>
table.image_table { margin: 0 auto 0 auto; } <br>
table.image_table td { padding: 5px } <br>
table.image_table a { display: block; } <br>
table.image_table img { display: block; width: 120px <br>
padding: 2px; border: 1px solid #ccc; } <br>
img.full { display: block; margin: 0 auto 0 auto; <br>
width: 300px; border: 1px solid #000 } <br>
＜/style＞ <br>

＜script language="javascript"＞ <br>
＜? sajax_show_javascript(); ?＞ <br>

// Outputs directly to the "window" div <br>
function to_window(output) { <br>
　document.getElementById("window").innerHTML = output; <br>
} <br>

window.onload = function() { <br>
　x get table to window); <br>
}; <br>

＜/script＞ <br>
＜/head＞  <br>

　　最后一步是保证应用程序中的所有链接都是自定义的 Sajax 调用。只需要取上一节中的代码并作如下替换：href="index.php?start=0&step=5" 变为 ，href="expand.php?index=0" 变为 。 <br>

　　并在相应的函数中做同样修改： get_image_link() 和 get_table_link()。这样向 Sajax 的转化就完成了（如图 6 所示）。所有链接都变成了与远程 PHP 调用对应的 Javascript 调用，PHP 使用 Javascript 响应处理程序 to_window() 直接输出到页面。 <br>

　　整个应用程序都包含在一个页面中，还可以把其余功能（get_table()、 get_image() 等）放在不能从 Web 访问的单独的库文件中。在大多数 Ajax 应用程序中，每个发往服务器的请求都需要由单独的脚本处理，或至少需要编写一个非常庞大的处理程序脚本来重定向请求。将所有这些文件都集中到一起可能非常麻烦。使用 Sajax 永远只需要一个文件，在该文件中只需定义我们使用的函数即可。Sajax 代替了处理程序脚本。  <br>

可以看到 URL 仍然保持不变，并带来了更多愉快的用户体验。window div 显示在一个灰色的框中，通过 Sajax 生成的内容非常清楚。脚本不一定要知道自身或者它在服务器上的位置，因为所有的链接最终都成为直接对页面自身的 Javascript 调用。因此我们的代码能够很好的模块化。我们只需要保持 Javascript 和 PHP 函数在同一个页面上即可，即使页面位置发生了变化也没有关系。 <br>


 

　　使用 Sajax 把我们的相册变成活动的 Web 应用程序如此轻而易举，我们要再花点时间添加一些功能，进一步说明 Sajax 如何使从服务器检索数据变得完全透明。我们将为相册添加元数据功能，这样用户就能为他们的图片添加说明。 <br>

　　元数据 <br>

　　没有上下文说明的相册是不完整的，比如照片的来源、作者等。为此我们要将图像集中起来创建一个简单的 XML 文件。根节点是 gallery，它包含任意多个 photo 节点。每个 photo 节点都通过其 file 属性来编号。在 photo 节点中可以使用任意多个标记来描述照片，但本例中只使用了 date、locale 和 comment。 <br>

包含元数据的 XML 文件 <br>

＜?xml version="1.0"?＞ <br>
＜gallery＞ <br>
　＜photo file="image01.jpg"＞ <br>
　　＜date＞August 6, 2006＜/date＞ <br>
　　＜locale＞Los Angeles, CA＜/locale＞ <br>
　　＜comment＞Here's a photo of my favorite celebrity＜/comment＞ <br>
　＜/photo＞ <br>
　＜photo file="image02.jpg"＞ <br>
　　＜date＞August 7, 2006＜/date＞ <br>
　　＜locale＞San Francisco, CA＜/locale＞ <br>
　　＜comment＞In SF, we got to ride the street cars＜/comment＞ <br>
　＜/photo＞ <br>
　＜photo file="image03.jpg"＞ <br>
　　＜date＞August 8, 2006＜/date＞ <br>
　　＜locale＞Portland, OR＜/locale＞ <br>
　　＜comment＞Time to end our road trip!＜/comment＞ <br>
　＜/photo＞  <br>
＜/gallery＞  <br>

　　文件的解析不在本文讨论范围之列。我们假设您能够熟练使用 PHP 中众多 XML 解析方法中的一种。如果不熟悉的话，建议阅读 参考资料中的文章。我们不再浪费时间解释如何将该文件转化成 HTML，作为一个练习，读者可以自己了解下面的代码如何使用 XML 文件并生成 HTML。清单 13 中的代码使用了 PHP V5 中自带的 SimpleXML 包。 <br>

 元数据函数<br>

function get_meta_data ( $file ) {<br>

　// Using getimagesize, the server calculates the dimensions<br>
　list($width, $height) = @getimagesize("images/$file");<br>
　$output = "＜p＞Width: {$width}px, Height: {$height}px＜/p＞";<br>

　// Use SimpleXML package in PHP_v5:<br>
　// http://us3.php.net/manual/en/ref.simplexml.php<br>
　$xml = simplexml_load_file("gallery.xml");<br>

　foreach ( $xml as $photo ) {<br>
　　if ($photo['id'] == $file) {<br>
　　　$output .= !empty($photo-＞date) ? "＜p＞Date taken:{$photo-＞date}＜/p＞" : '';<br>
　　　$output .= !empty($photo-＞locale) ? "＜p＞Location:{$photo-＞locale}＞/p＞" : '';<br>
　　　$output .= !empty($photo-＞comment) ? "＜p＞Comment:{$photo-＞comment}＜/p＞" : '';<br>
　　}<br>
　}<br>
　return $output;   <br>

要注意的是，get_meta_data() 函数中还使用 getimagesize()（一个核心 PHP 函数，不需要 GD）计算图像的大小。 <br>
　　再回到 get_image() 函数，它包含由 get_image_list() 生成的文件名的列表。查找元数据只需要将文件名传递给该函数即可。<br>
[[category:PHP]]  [[category:MYSQL]]