用DHTML与XML制作Ajax幻灯片
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(window.ActiveXObject)
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send("");
}
}
loadXMLDoc( "http://localhost/kenburns/slides.php" );
</script>
</body>
</html>
代码从指定的 URL 获取 XML 内容，然后 loadXMLDoc 函数启动 Ajax 请求。检索页面的请求异步发出并返回结果。请求完成后，对结果调用 processReqChange 函数。这里用 processReqChange 函数在警告窗口中显示 responseText 的函数值。在我的 Firefox 浏览器中调用该页面的结果如 图 4 所示。
图 4. 在警告窗口中显示的 XML
开局不错。毫无疑问，我们从服务器取回了 XML 数据。但是有必要指出几点。首先要注意 URL 使用了绝对路径，包括域名等等。对于 Ajax 来说这是唯一有效的 URL 格式。编写 Ajax JavaScript 代码的服务器代码总是创建有效的、完整格式的 URL。
这里不那么明显的另一点是 Ajax 的安全保护措施。JavaScript 代码不能请求任意的 URL。URL 的域名必须和该页面相同。在这里域名就是 localhost。但必须指出不能呈现 www.mycompany.com 的 HTML 但却让脚本从 data.mycompany.com 检索数据。域必须完全相同，包括子域名。
有趣的另一点是 loadXMLDoc 中的代码，似乎是费力地创建一个请求对象。为何这么麻烦呢？Internet Explorer 7 的预览版没有内建 XMLHTTPRequest 对象类型。因此必须使用 Microsoft ActiveX® 控件。
最后在 processReqChange 函数中，可以看到我在查看 readyState 是否等于 4，status 是否设为 200。readyState 的值 4 表示事务已经完成。status 的值 200 表示页面是有效的。如果没有找到页面，就可能会得到错误消息 404，就像您在浏览器中看到的那样。这里没有处理异常情况，因为这仅仅是一个例子，不过发布的 Ajax 代码应该处理返回错误的请求。
动态创建 HTML
在说明如何创建幻灯片放映之前，首先扩展现在的例子，让 processReqChange 函数用服务器返回的 XML 请求结果创建一个 HTML 表格。这样做可以验证两件事：能够读取 XML 并能够根据 XML 动态创建 HTML。
清单 3 显示了修改后的代码，它将从返回的 XML 创建表格。
清单 3. 改进的测试页面
<html>
<body>
<table>
<tbody id="dataTable">
</tbody>
</table>
<script>
function processReqChange()
{
if (req.readyState == 4 && req.status == 200 && req.responseXML != null)
{
var dto = document.getElementById( 'dataTable' );
var items = [];
var nl = req.responseXML.getElementsByTagName( 'slide' );
for( var i = 0; i < nl.length; i++ )
{
var nli = nl.item( i );
var src = nli.getAttribute( 'src' ).toString();
var width = parseInt( nli.getAttribute( 'width' ).toString() );
var height = parseInt( nli.getAttribute( 'height' ).toString() );
var trNode = document.createElement( 'tr' );
var srcNode = document.createElement( 'td' );
srcNode.innerHTML = src;
trNode.appendChild( srcNode );
var widthNode = document.createElement( 'td' );
widthNode.innerHTML = width.toString();
trNode.appendChild( widthNode );
var heightNode = document.createElement( 'td' );
heightNode.innerHTML = height.toString();
trNode.appendChild( heightNode );
dto.appendChild( trNode );
}
load_slides( items );
start_slides();
}
}
function loadXMLDoc( url )
{
req = false;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
}
