使用 DHTML 与 XML 制作 Ajax 幻灯片

lastwinner

结束语
本文中尽可能地使用了面向对象的 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，仅仅在浏览器中就能实现令人眩目的效果。这意味着客户不再需要下载奇怪的扩展或者运行有可能不安全的应用程序。他们可能偶尔看到了您的网页，令人震惊的图像效果会让他们经常来光顾。

lastwinner

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


关于下载方法的信息


Get Adobe® Reader®

lastwinner

参考资料
学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文。
• developerWorks XML 专区：请访问 developerWorks XML 专区来提高您的 XML 技能。
• 技术活动和网络广播：通过 developerWorks 技术活动和网络广播跟上技术的发展。
• PHP 主页：学习 PHP 的方方面面。
• MSDN：通过 Microsoft Developer Network（MSDN®）了解各种浏览器中都具有的 DOM。
• Dynamic HTML：Danny Goodman 撰写的 Dynamic HTML: The Definitive Reference（O'Reilly，1998 年 7 月）是一本必备的 DHTML 案头参考。
• W3C 站点：通过万维网联盟（W3C）的网站进一步了解 HTML、CSS、XML 和其他相关标准。
• Flickr API 文档站点：请访问 Flickr，这是客户端编码和 REST Web 服务设计的一个好例子。
• Ken Burns Effect：看看 Wikipedia 上的 Ken Burns Effect 定义。IMDB 也提供了 Ken Burns 导演的所有影片。

获得产品和技术

• IBM 试用软件：用 IBM 试用软件开发您的下一个项目，可直接从 developerWorks 下载。
• Apple iPhoto：这是促使我编写本文的灵感源泉，虽然其他应用程序也有 Ken Burns Effect。
  

讨论

• developerWorks blog：参与 developerWorks blog，加入 developerWorks 社区。
  

关于作者


Jack D. Herrington 是一位具有 20 多年经验的资深软件工程师。他写了三本著作：Code Generation in Action、Podcasting Hacks 和即将出版的 PHP Hacks，还写了 30 多篇文章。可以通过 jack_d_herrington@codegeneration.net 和 Jack 联系。

lastwinner

全文完
原文地址： http://www-128.ibm.com/developer ... lideshow/index.html