用DHTML与XML制作Ajax幻灯片
日期：2010-09-04 浏览次数：20555 次
Ajax 幻灯片放映
个人图像管理应用程序（如 Macintosh® 上的 Apple® iPhoto®）使得幻灯片浏览广为人知。在幻灯片浏览中，图像按照时间顺序先后淡入淡出。此外，图片还通过所谓的 “Ken Burns Effect” 进行移动和缩放。
在该例中，我让浏览器从服务器上下载一个图像列表。然后使用动态 HTML（DHTML）把图片列表组成一个幻灯片。我使用随机的缓慢移动、缩放和渐变来改变图片，实现了令人满意的 Ken Burns Effect 版本，而不需要下载 Macromedia® Flash 或其他重量级的动画工具。
体系结构
要了解 Ajax 有何不同，首先必须理解当前的 Web 编程模型。客户机和服务器之间的简单交互如 图 1 所示。
图 1. 客户机-服务器交互的 Web V1.0 模型
Web 浏览器或者客户机 向 Web 服务器发出 GET 或 POST 请求。服务器格式化 HTML 响应。客户机解析 HTML 并显示给用户。如果用户单击其他链接和按钮，就向服务器发出另一个请求，用服务器返回的新页面替换当前页面。
新模型具有更多的异步特色，如 图 2 所示。
图 2. 客户机-服务器交互的 Ajax 模型
在新的模型中，和以前一样，服务器也返回 HTML 页面。但是这个页面中有一些 JavaScript 代码。在需要的时候，这些代码向服务器请求更多信息。这些请求可以是简单的 GET 请求（Representational State Transfer (REST) 服务）或者 POST 请求（SOAP）。
然后，JavaScript 代码解析响应（通常用 XML 编码）并动态更新页面以反映新的数据。除了 XML 外，还返回 JavaScript Serialized Object Notation（JSON）格式编码的数据。浏览器很容易理解这类数据，但其他类型的客户机则不行。返回 XML 的意义在于浏览器之外的其他客户机也能解释数据。选择由您来决定并依赖于具体的应用程序。
开发 Ajax 幻灯片的第一步是结合 REST 数据服务。该例中使用 PHP 页面返回所有可用的幻灯片图像及其大小（宽和高）。所有图像都放在 images 目录中。文件名格式为 name_width_height.jpg，比如 oso1_768_700.jpg 表示该文件是我的狗 Oso 的照片，宽 768 像素，高 700 像素。我坚持使用这种命名方式，因为这样就很容易确定图片的宽和高，而不用费力去打开 Adobe® PhotoShop® 或 Macromedia Fireworks。
我使用 清单 1 所示的 PHP 服务器代码来提供图片列表。
清单 1. slides.php 服务器页面
<?php
header( "Content-type: text/xml" );
?>
<slides>
<?php
if ($handle = opendir('images')) {
while (false !== ($file = readdir($handle)))
{
if ( preg_match( "/[.]jpg$/", $file ) ) {
preg_match( "/_(\d+)_(\d+)[.]/", $file, $found );
?>
<slide src="images/<?php echo $file; ?>"
width="<?php echo $found[1]; ?>"
height="<?php echo $found[2]; ?>" /><?php echo( "\n" ); ?>
<?php
}
}
closedir($handle);
}
?>
</slides>
代码很简单。首先将内容类型设置为 XML。让浏览器将该文档识别为 XML 并为其创建文档对象模型（DOM）至关重要。代码从 <slides> 标记开始，然后读取图片目录并为遇到的每个图片创建 <slide> 标记。最后脚本结束 <slides> 标记。
如果用 Mozilla® Firefox® 浏览器打开（在我的机器上）本地主机 kenburns 目录中的该页面，就会看到 图 3 所示的结果。
图 3. slides.php 服务器脚本的输出
一共三幅图片：我的女儿和我的两条狗。当然在这里可以增加任何需要的细节或者多媒体，但我尽量保持例子的简单性。
检索 XML
下一步就是编写一个 HTML 页面（如 清单 2 所示）从服务器读取数据并检验浏览器和服务器之间使用的 Ajax 连接。这段 HTML 代码包含内嵌的 JavaScript 代码，检索 XML 并打开一个警告窗口显示服务器返回的文本。
清单 2. 简单的 Ajax 读取数据页面
<html>
<body>
<script>
function processReqChange()
{
if (req.readyState == 4 && req.status == 200 && req.responseXML != null)
{
alert( req.responseText );
}
}
function loadXMLDoc( url )
{
req = false;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
}
else if(wind
