1.1 AJAX的用户观点

作者: 章立民 出处:机械工业出版社 　2007-07-31 13:04　   砖    好    评论  条 　进入论坛

阅读提示：本书详细介绍了AJAX在Web开发上的应用。主要内容包括：ASP.NET AJAX技术概述、实现异步局部更新页面、UpdatePanel编程功能、PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合OOP功能、如何在客户端JavaScript调用Web服务、如何从客户端JavaScript调用ASP.NET应用服务以及如何创建客户端功能的组件等。本文是AJAX的用户观点介绍.

1.1   AJAX的用户观点
相信页面程序开发人员对于JavaScript、CSS（Cascading Style Sheets，层叠样式表）、DOM（Document Object Model，文档对象模型）、DHTML（Dynamic HTML）与XML等技术都不会感到陌生。所谓的AJAX（Asynchronous JavaScript And XML）其实就是上述这些技术综合之后的强化体，从英文的字意可以了解，AJAX技术就是异步的JavaScript与XML，它打破了传统页面开发技术的藩篱，使得页面更具互动性，也顺势打开Web 2.0时代之门。
在过去，即使只是页面中极小部分的内容需要更新，也必须将整个页面发送给Web服务器来处理，处理完毕之后还必须再将整个页面的内容传送回客户端。这样不分青红皂白地一股脑式的处理，效率当然低下，响应时间更是不佳。然而AJAX的重要与高明之处在于，它只会将页面中需要更新的部分传送给Web服务器来处理，并且将处理后的内容返回客户端浏览器来进行局部更新，由于只需要传送并处理少量的数据，而不是将整个页面内容重新加载到浏览器中，自然在效率上大幅提升。这样的做法，扎扎实实地提升了页面的互动性、响应速度与便利性，使得网页界面的使用体验大幅提高，更贴近于Windows Form应用程序。
或许这样说，大家还无法真正体会AJAX所带来的好处与便利性，下面介绍几个真实世界中的AJAX实际应用案例，相信大家必定会印象深刻：
在AJAX问世之前，大部分的网站都缺乏与用户互动的设计，即便是号称全球最大的网络书店—亚马逊（http://www.amazon.com）也仅能根据先前购物行为给予新品推荐。再以门户网站为例，大多数的门户网站不允许自行设计版面，大大限制了用户根据自身需求而设计个性化版面的能力。然而在有了AJAX之后，浏览器首页可以由不同信息源的区块所组成，或是在不同区块中陈设各式各样的对象与信息源。比方说，如图1-1所示，您可以在页面左上方区块中摆放一个显示当前时间与农历的对象；您甚至可以直接选择页面区块，接着用鼠标将区块拖放到所欲摆放的位置上，如图1-2所示。这样一来，浏览器首页将呈现出符合用户自我需求与个人特色的面貌，由于所要观看的信息源与对象皆由您亲自打造，与传统的网站相比较，使用AJAX技术的网站更需要用户主动地参与，并与页面有更多的互动。

图   1-1

以Windows Live Local网站（http://local.live.com）为例，其中的各个文本输入方框都具有水印效果，以便提示用户应该输入什么数据，而一旦用户将光标移入文本框中，水印文字就会消失，以避免干扰用户的输入操作（如图1-3所示）。这种具亲和力的用户界面效果，即是利用AJAX实现出来的。
Windows Live Local网站（http://local.live.com）除了具备水印效果的文本输入方框之外，用户还可以在地图上，持续按住鼠标左键来拖拽整张地图。事实上，整张地图是由很多小块的图片所拼凑而成。如果您将地图拖拽得比较远，使得Windows Live Local要显示新的区域时，它将会以异步方式加载这些区域的图片。此时，细心的您可能会发现最初有一些灰色区域，当它们被浏览器加载完成后，这些图片就会一张一张陆续出现。在这些图片陆续被加载的过程中，用户还可以继续拖拽鼠标，并不需要等待整张地图完全出现。当Web服务器将这些小块图片传送到浏览器中，浏览器会自动将这些图片暂存起来，这样一来，当用户欲浏览先前浏览过的地图时，无需等待图片重新下载，即可立刻看到整张地图。这样的交互式效果，同样是利用AJAX实现出来的。

图   1-2

图   1-3

比较Windows Live Local与非AJAX的传统电子地图网站，我们所看到的是完全不同的互动方式。如图1-4所示，在使用传统电子地图网站时，地图很明显是由许多小块的图片组成，地图的缩放、平移或其他导航按钮图标可能会显示在地图的边缘。每次单击这些按钮图标，用户的操作都会被中断，原因是页面必须刷新之后，才会出现一个显示不同地区的地图。在使用过Windows Live Local之后，您一定会觉得在非AJAX的传统电子地图网站中，重新绘制地图的速度缓慢，且操作方式不直观。

图   1-4

资料来源：http://map.bjcity.cn/
回想使用页面邮件系统（Web Mail）的操作经验，每使用一个功能（例如：读取一封邮件），浏览器画面会闪一下（因为必须刷新页面），接着才开始出现邮件内容。如果使用AJAX技术的页面邮件系统，则操作经验将会不同于一般的页面邮件系统。以号称没有弹出窗口、没有横幅广告又可免费使用的Gmail（http://mail.google.com）为例，当您读取某一封信件时，页面右上方会出现“载入中……”的提示，等到这个提示消失之后，页面完全不需要刷新，就可以看到邮件内容，如图1-5所示。

图   1-5

这就是AJAX与传统页面不同之处，感觉所有的操作都在同一个页面中就完成，不需要重新加载页面，也不会有扰人的屏幕闪烁。可以预期的是，用户会喜欢这样的操作界面。使用AJAX所开发的页面应用程序的远景将是不可限量的。

回书目   上一节   下一节