|
创建 Ajax 幻灯片放映
最后一步是创建 Ajax 版本的幻灯片放映。这意味着要使用从 slides.php 服务获得的内容代替硬编码的图像列表。
Ajax 版本的幻灯片放映代码如 清单 8 所示。
清单 8. Ajax 幻灯片代码
<html>
<head>
<style type="text/css">
body { background: black; margin: 0px; padding: 0px; }
</style>
<script src="KenBurnsAnimations.js">
</script>
<script src="Animation.js">
</script>
<script src="ImageInfo.js">
</script>
<script src="SlideShow.js">
</script>
</head>
<body>
<div style="position:relative;width:100%;height:100%;overflow:hidden;"
id="imgContainer">
</div>
<script>
function processReqChange()
{
if (req.readyState == 4 && req.status == 200
&& req.responseXML != null)
{
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() );
items.push( { src: src, width: width, height: height } );
}
load_slides( items );
start_slides();
}
}
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>
我把 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 幻灯片我还有以下建议：
1、使用基于时间的动画。用 setInterval 代码实现基于步骤的动画看起来有些抖动。
2、对可视化元素用 DHTML 建立代码原型，然后再增加 Ajax 内容。这意味着可以离线编写 DHTML 代码。
3、将连接到服务器的 Ajax 代码和呈现数据的 DHTML 用户界面（UI）组件分开。这样即便不使用 Ajax 获取数据，也仍然能够使用那些界面组件。
4、使用 createElement 和 appendChild 函数而不是 innerHTML 来改变页面内容。
5、一定要针对所有希望支持的浏览器检查客户端代码。此外，还要记录下您所遇到的兼容性问题以及解决这些问题的方法。尽量将固定的客户端代码封装成可重用的 JavaScript helper 函数和类。
6、对于复杂的界面（包括多重动画），编码之前应首先使用情节串连板与客户一起确定他们所需要的效果。情节串连板是代码规范的动画版本。JavaScript 动画写起来很快，因此在编码之前明确目标是值得的，否则可能走不少冤枉路。
7、从职业的角度来看，仅关注数据库和业务逻辑的 Web V1.0 时代的 “后端工程师”，在 Web V2.0 时代中作用是有限的。必须认识到并非所有对服务器的请求都要借助于 HTML。Ajax 和 DHTML 对那些愿意花钱提高其技能的真正的工程师来说是现实的工具。前端不仅仅是设计人员的前端。
过去，通常需要 Flash 或者类似的应用程序才能实现本文这样的动态幻灯片放映。现代化的浏览器为 DHTML 提供了不透明性这类丰富的特效支持（Internet Explorer 甚至支持旋转、模糊等），再加上 Ajax，仅仅在浏览器中就能实现令人眩目的效果。这意味着客户不再需要下载奇怪的扩展或者运行有可能不安全的应用程序。他们可能偶尔看到了您的网页，令人震惊的图像效果会让他们经常来光顾。
下载：Code and file samples
|
