编辑“Php-ajax简单示例”（章节）

== 将 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教程]]
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*