1.7  Ajax模式

与任何优秀的技术一样，Ajax也有许多模式。如果想要详细地了解Ajax模式，请阅读Christian Gross撰写的Ajax Patterns and Best Practices一书并访问Ajax模式网站（http://ajaxpatterns.org/ wiki/index.php?title=Main_Page）。

1.7.1  淡出技术

Ajax真正的灵活之处就是可以只修改网页的一部分。可以只更新发生改变的部分，而无需重绘整个页面。虽然这是一项非常方便的技术，但是它也可能会给那些原以为会刷新整个页面的用户带来疑惑。考虑到这一点，37signals在它的像Basecamp（www.basecamphp.con）和Backpack（www.backpackit.com）这样的产品中使用了黄色淡出技术（Yellow Fade Technique，YFT）作为通知用户发生了什么变化的巧妙方法。顾名思义，YFT将发生改变的部分页面重绘成黄色，然后再慢慢地褪回到原来的背景颜色（见图1-9）。

图1-9  37signals的Backpack中的黄色淡出技术

淡出技术（FAT）模式在本质上和YFT很相似。其实，真正不一样的地方只是用来褪色的颜色；毕竟，黄色可能并不是最好的选择。实现这一技术并不是很难；可以用你最喜欢的搜索引擎找到示例代码，或者更好的是可以使用简化了这一技术的实现的库，如script.aculo.us。

1.7.2  自动刷新

能够自动刷新（Auto Refresh）页面的某些部分是非常有用的。随着天气、新闻或其他信息流的不断变化，只重绘发生改变的部分要比为了一些小变化就刷新整个页面有意义得多。当然，这对于那些已经习惯了单击“刷新”按钮的用户来说并不是那么显而易见的，这就是为什么自动刷新模式通常都和FAT一起使用的原因。

除了减少用户操作之外，自动刷新还有一个更重要的好处：它能减少服务器的负载。与成千上万的用户频繁地单击“刷新”按钮相比，可以设置一个明确的轮询周期（polling period），这个周期内的请求会被安排得更均匀。Digg（www.digg.com）是一个迎合技术社区的新闻网站，它使用社会书签（social bookmarking）和社论管理（community editorial control）来发布有趣的故事。其内容是用户驱动的，并且改变得很频繁，这正是使用Auto Refresh的好地方（见图1-10）。

图1-10  运行中的自动刷新——网站上实时更新的故事

1.7.3  部分页面绘制

对于这一点，我们已经讨论了很多内容，Ajax真正的力量之一就是再也不需要重绘整个页面了；相反，可以只修改那些发生了改变的地方。很明显，可以把它和FAT或自动刷新一起使用。事实上，这对Web应用来说是很有帮助的。

现有的许多框架都可以帮助我们修改页面的某一部分，而且，由于现代浏览器对DOM的支持的一致性，这种方法比所想的要简单得多。图1-11展示了A9（http://maps.a9.com）的BlockView特性，它是部分页面绘制（Partial Page Paint）模式的一个例子。当你选择了左边地图上的不同区域的时候，就会自动地改变相关的街道图片以反映你在地图上单击的地方（假设图片存在）。

图1-11  A9的BlockView特性

1.7.4  可拖放DOM

门户（portal）本应该解决我们的所有问题。我们把企业内部网门户设计为一站式站点，这样雇员们就可以一下子获得他们所需的所有信息了。最常使用的程序、关键报告的链接、业界信息——定制化的门户本应是这一切的答案。但不幸的是，企业内部网门户从来没有真正流行起来，至少其部分原因是由于难以添加新部件和移动现有部件的界面。通常，不得不进入一个单独的管理员页面才能做出你的改动（刷新整个页面一次）、保存改动，然后返回到主页面（又一次页面刷新）。这种方法虽然有效，但是它肯定不是理想的方法。

Ajax赋予了门户新的生命，尤其是使用可拖放DOM（Draggable DOM）模式。通过这种方法，可以在主页中编辑每个单独的部件，并且如果要定制页面，只需简单地用鼠标选中部件，然后拖放至新的位置。有好几个网站，包括Google个性化主页（www.google.com/ig），已经使用了这种模式，如图1-12所示。

图1-12  Google个性化网站使用可拖放DOM模式