使用 DHTML 与 XML 制作 Ajax 幻灯片

Jack Herrington  高级软件工程师, Code Generation Network

2006 年 5 月 23 日

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 服务器页面

代码很简单。首先将内容类型设置为 XML。让浏览器将该文档识别为 XML 并为其创建文档对象模型（DOM）至关重要。代码从 标记开始，然后读取图片目录并为遇到的每个图片创建 标记。最后脚本结束 标记。

如果用 Mozilla® Firefox® 浏览器打开（在我的机器上）本地主机 kenburns 目录中的该页面，就会看到 图 3 所示的结果。

图 3. slides.php 服务器脚本的输出

一共三幅图片：我的女儿和我的两条狗。当然在这里可以增加任何需要的细节或者多媒体，但我尽量保持例子的简单性。

检索 XML

下一步就是编写一个 HTML 页面（如 清单 2 所示）从服务器读取数据并检验浏览器和服务器之间使用的 Ajax 连接。这段 HTML 代码包含内嵌的 JavaScript 代码，检索 XML 并打开一个警告窗口显示服务器返回的文本。

清单 2. 简单的 Ajax 读取数据页面

代码从指定的 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. 改进的测试页面

在浏览器中打开该页面将显示 图 5 所示的结果。

图 5. 修改后的测试页

修改后的 processReqChange 代码现在查看 responseXML 对象而不是 responseText 文本。此外，它还使用 getElementsByTagName 访问所有的 标记。然后解析 src、width 和 height 属性，并使用 document 对象的 createElement 方法创建行和单元格来存放数据。该方法使用的 createElement 远比过去的老方法健壮，原来要建立一个包含表格内容的 HTML 字符串，然后用 innerHTML 将数据添加到已有的元素中。

创建幻灯片放映

现在已经有了能够确定幻灯片中图像的 Web 服务，还需要显示这些幻灯片并执行 Ken-Burns-Effect 动画的客户端代码。为此必须将执行三种基本功能的 JavaScript 对象结合起来：

1. 封装图像
2. 提供基本的动画引擎
3. 实现特效（比如移动、缩放和渐变）

 

封装图像

首先从图像容器开始，我创建一个类 ImageInfo，如 清单 4 所示。

清单 4. ImageInfo.js

function ImageInfo( src, width, height, htmlObj ) { this.src = src; this.width = width; this.height = height; this.current_width = width; this.current_height = height; this.htmlObj = htmlObj; this.htmlObj.src = this.src; this.htmlObj.width = this.current_width; this.htmlObj.height = this.current_height; } ImageInfo.prototype.set_opacity = function( opacity ) { this.htmlObj.style.MozOpacity = opacity / 100; var f = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+opacity+')'; this.htmlObj.style.filter = f; } ImageInfo.prototype.set_position = function( x, y ) { this.htmlObj.style.left = x+'px'; this.htmlObj.style.top = y+'px'; } ImageInfo.prototype.set_size = function( w, h ) { this.current_width = w; this.current_height = h; this.htmlObj.width = this.current_width; this.htmlObj.height = this.current_height; } ImageInfo.prototype.get_image = function() { return this.htmlObj; } ImageInfo.prototype.hide = function() { this.htmlObj.style.visibility = 'hidden'; } ImageInfo.prototype.show = function() { this.htmlObj.style.visibility = 'visible'; }

幻灯片中每幅图片都有一个对应的 ImageInfo 对象。该对象封装了图像信息：src、width 和 height。该对象还包含对在文档中显示图像的 HTML 标记的引用，以及移动图像、设置透明度等的 helper 方法。注意，在 Firefox 和其他基于 Gecko® 的浏览器中，MozOpacity 样式用于设置不透明性。Internet Explorer 中则使用过滤器效果。

创建简单的动画引擎

下面我们来编写一个简单的动画引擎。Animation.js 文件中的代码如 清单 5 所示。

清单 5. Animation.js

function Animation( am, img, seconds, effects ) { this.img = img; this.animationManager = am; this.seconds = seconds; this.effects = effects; this.startMS = 0; } Animation.prototype.start = function() { this.animationManager.add( this ); this.startMS = 0; this.img.hide(); for( var e in this.effects ) { this.effects[e].apply( 0 ); } this.img.show(); } Animation.prototype.animate = function() { var d = new Date(); if ( this.startMS == 0 ) this.startMS = d.valueOf(); var p = (((d.valueOf()-this.startMS)/1000)/this.seconds)*100; for( var e in this.effects ) this.effects[e].apply( p ); } Animation.prototype.done = function() { var d = new Date(); return ( ( d.valueOf() - this.startMS ) / 1000 ) > this.seconds; } function AnimationManager( speed ) { this.animations = []; var self = this; window.setInterval( function() { self.idle(); }, speed ); } AnimationManager.prototype.add = function( anim ) { this.animations.push( anim ); } AnimationManager.prototype.idle = function() { if ( this.animations.length > 0 ) { this.animations[0].animate(); if ( this.animations[0].done() ) this.animations.shift(); if ( this.animations.length == 0 ) this.on_finished(); } } AnimationManager.prototype.on_finished = function() { }

清单 5 包含两个类：Animation 和 AnimationManager。AnimationManager 类控制定时器并向其 Animation 对象列表中的第一项发送动画消息。当 Animation 对象报告自己已经完成的时候，该类就转向下一项，依此类推。

Animation 在一定的时间（按秒数指定）内对特定图片应用一系列特效。Animation 对象需要计算完成度消息并将其发送给每种特效的 apply 方法。特效然后根据这个百分比计算应该如何处理图像。比如，移动特效知道起点和终点，可以根据这个百分比计算应该将图像放到何处。如果是 50%，图像应该移到起点和终点之间。

作为我工作的一部分，同时也为了撰写本文，我考察了大量的 JavaScript 动画代码。JavaScript 动画经常因为不稳定而受到指责，因为所有 JavaScript 动画都使用 window.setInterval 方法来完成。这是一个定时器方法，同时指定了回调时间间隔和回调函数。Web 上的大部分代码都要求每次调用该函数时动画移动一步。但这并不能真正工作，因为告诉浏览器的间隔仅仅是一个建议。如果规定 20 毫秒，但实际上可能第一次在 25 毫秒时调用，下一次却要等到一秒钟以后。浏览器是单线程的，因此不能依赖于定时器。

解决方案是使用 Date 对象的 valueOf 方法确定动画开始了多长时间。这个时间差是用毫秒计的，用于确定当 setInterval 定时器离开时动画应该执行百分之多少。该方法可以提供规定的任意长时间的平滑动画。

执行特效

三个核心类的最后一个是 Ken Burns Effects。这些特效通过 Animation 对象应用于图像，如 清单 6 所示。

清单 6. KenBurnsAnimations.js

function KenBurnsFader( img, windowSize ) { this.img = img; this.windowSize = windowSize; } KenBurnsFader.prototype.apply = function( percent ) { var opacity = 100; if ( percent <= this.windowSize ) opacity = ( percent / this.windowSize ) * 100; else if ( percent >= ( 100 - this.windowSize ) ) opacity = ( ( 100 - percent ) / this.windowSize ) * 100; this.img.set_opacity( opacity ); } function KenBurnsZoomer( img, start, end, cw, ch ) { this.start = start; this.end = end; this.img = img; var wr = this.img.width / cw; var nw = this.img.width * wr; var nh = this.img.height * wr; this.sw = ( nw * ( this.start / 100 ) ); this.ew = ( nw * ( this.end / 100 ) ); this.sh = ( nh * ( this.start / 100 ) ); this.eh = ( nh * ( this.end / 100 ) ); this.dw = ( this.ew - this.sw ) / 100; this.dh = ( this.eh - this.sh ) / 100; } KenBurnsZoomer.prototype.apply = function( percent ) { this.img.set_size( this.sw + ( this.dw * percent ), this.sh + ( this.dh * percent ) ); } function KenBurnsMover( img, sx, sy, ex, ey, cw, ch ) { this.img = img; this.sx = sx / 100; this.ex = ex / 100; this.sy = sy / 100; this.ey = ey / 100; this.cw = cw; this.ch = ch; this.wr = this.img.width / this.cw; } KenBurnsMover.prototype.apply = function( percent ) { var nw = this.img.current_width * this.wr; var nh = this.img.current_height * this.wr; var cntw = ( ( this.cw / 2 ) - ( nw / 2 ) ); var cnth = ( ( this.ch / 2 ) - ( nh / 2 ) ); var sx = ( nw * this.sx ); var ex = ( nw * this.ex ); var sy = ( nh * this.sy ); var ey = ( nh * this.ey ); var dx = ( ex - sx ) / 100; var dy = ( ey - sy ) / 100; var x = cntw + sx + ( dx * percent ); var y = cntw + sy + ( dy * percent ); this.img.set_position( x, y ); }

这三个类分别处理应用于图像的不同特效。KenBurnsFader 类使用不透明度处理图像的淡入淡出。KenBurnsZoomer 类处理图像的缩放，从最初的大小到最终的大小。KenBurnsMover 类处理图像的移动，从起点到终点（用图像的百分比指定）。

经过一些试验后，我发现最吸引人的移动特效是相对于窗口中心从一个角移动到另一个角。KenBurnsMover 类的 apply 方法包含一些复杂的数学运算，不仅相对于包含图像的

标记的中心来移动，还要计算图像和

标记的相对大小，这样在小窗口中移动的距离就小，在大窗口中移动的距离就大。放大倍数根据窗口的高度确定。

实现非 Ajax DHTML

有了这些基础类之后，就可以实现幻灯片的非 Ajax DHTML 版本来进行测试了，如 清单 7 所示。

清单 7. 非 Ajax 幻灯片放映

不用电影是很难说明上述代码在浏览器中的运行结果的。因此我抓了一个快照，如 图 6 所示。

图 6. 幻灯片放映的快照

该页面首先通过

我把 start_slides 和 load_slides 函数移到了外部 JavaScript 文件 SlidesShow.js 中，以免该文件过大。代码的其他部分和 清单 2 中的 Ajax 测试页类似。只不过这些代码没有插入警告窗口，也没有把数据插入一个表格，而是创建了一个幻灯片信息数组，然后调用 load_slides 和 start_slides。

如此而已！这样就可以使用 Ken Burns Effect 动态地移动、缩放和渐变图像的 Ajax 幻灯片。

结束语

本文中尽可能地使用了面向对象的 JavaScript 代码。JavaScript 是一种完全面向对象的语言，虽然可能不使用 class 和 interface 关键字，但仍然可以保持代码的清晰性和可维护性。如果可以的话，我建议您使用 Ajax 框架。这里没有使用框架是因为我想介绍一种轻型的 Ajax 解决方案。但现在的框架（有很多）更容易编写更具可移植性的 Ajax 和 DHTML 代码。

除了本文中介绍的之外，关于 Ajax 幻灯片我还有以下建议：

• 使用基于时间的动画。用 setInterval 代码实现基于步骤的动画看起来有些抖动。
• 对可视化元素用 DHTML 建立代码原型，然后再增加 Ajax 内容。这意味着可以离线编写 DHTML 代码。
• 将连接到服务器的 Ajax 代码和呈现数据的 DHTML 用户界面（UI）组件分开。这样即便不使用 Ajax 获取数据，也仍然能够使用那些界面组件。
• 使用 createElement 和 appendChild 函数而不是 innerHTML 来改变页面内容。
• 一定要针对所有希望支持的浏览器检查客户端代码。此外，还要记录下您所遇到的兼容性问题以及解决这些问题的方法。尽量将固定的客户端代码封装成可重用的 JavaScript helper 函数和类。
• 对于复杂的界面（包括多重动画），编码之前应首先使用情节串连板与客户一起确定他们所需要的效果。情节串连板是代码规范的动画版本。JavaScript 动画写起来很快，因此在编码之前明确目标是值得的，否则可能走不少冤枉路。
• 从职业的角度来看，仅关注数据库和业务逻辑的 Web V1.0 时代的 “后端工程师”，在 Web V2.0 时代中作用是有限的。必须认识到并非所有对服务器的请求都要借助于 HTML。Ajax 和 DHTML 对那些愿意花钱提高其技能的真正的工程师来说是现实的工具。前端不仅仅是设计人员的前端。

过去，通常需要 Flash 或者类似的应用程序才能实现本文这样的动态幻灯片放映。现代化的浏览器为 DHTML 提供了不透明性这类丰富的特效支持（Internet Explorer 甚至支持旋转、模糊等），再加上 Ajax，仅仅在浏览器中就能实现令人眩目的效果。这意味着客户不再需要下载奇怪的扩展或者运行有可能不安全的应用程序。他们可能偶尔看到了您的网页，令人震惊的图像效果会让他们经常来光顾。

下载

描述	名字	大小	下载方法
Code and file samples for this article	x-ajaxslideshow/kenburns.zip	705KB	HTTP