互动式网页开发的应用及技术原理

6.4.6　互动式网页开发的Ajax应用及技术原理

Ajax实现了网站快捷响应和互动的功能，帮助用户更快更精准的找到所需信息。当前，很多网站都采用这种技术，Google map就是其典型应用。

（1）Ajax的概念与应用

Ajax（Asynchronous JavaScript and XML）由HTML、JavaScript、DHTML（Dynamic HTML）和DOM（Document Object Model）组成，这一方法可以将Web界面转化成交互性的Ajax应用程序。由于应用强调用户体验，使此类技术已成为Web 2.0技术的核心内容。Ajax结合了Java技术、XML以及JavaScript等编程技术，使用客户端脚本与Web服务器交换数据的Web应用开发方法，突破了页面重载惯例限制，能够优化用户体验，提升Web用户界面的交互功能，未来将会广泛应用在交互界面的设计中。

（2）Ajax的技术原理

Ajax是几种广泛使用技术的结合。Ajax集中了以下功能^[20]：

基于XHTML/CSS实现标准化界面；

使用DOM实现动态显示与交互功能；

通过XML和XSLT进行数据交换及处理；

使用XMLHttpRequest进行异步数据检索；

使用JavaScript整合相关技术。

Web 2.0的一个重要原则是将Web作为一个应用开发的平台，强调高可用性和交互能力强的用户界面是应用平台的基本要求。传统的Web应用交互需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢。与此不同，Ajax应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其他一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。由于在服务器和浏览器之间交换的数据大量减少，我们必然能看到响应更快的应用。同时许多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。从图6-15中可以看出传统网络应用模式与Ajax应用模式的区别。^[21]

图6-15　传统网络应用模式与Ajax应用模式的区别

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，可以将一些服务器负担的工作分配到客户端，利于客户端闲置的处理能力来处理，以减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

Ajax的优点是能在不刷新整个页面的前提下维护数据，这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息。Ajax所带来的好处体现在Web 2.0目前大量采用的与用户交互、收集用户行为信息、汇聚集体智慧以及提供更为个性化的服务上。当然Ajax技术本身是一个复杂的混合体，不断在增加新的内容，进一步可以与多种标准或协议协同使用，例如同样采用REST的SRU元搜索标准，OpenURL标准或嵌入对OAI的支持，以及对多种元数据标准的识别和解析等，并且Ajax对服务器端和客户端的应用环境具有较强的依赖性。

直观一点地说，Ajax能够实现不刷新浏览器窗口（当然更不用安装额外的插件）而满足用户的操作，它使得用户可以任意修改网页上的个人信息，且无需向服务器重新发送请求和刷新页面。这样，不仅大大提高了用户体验，而且还在很大程度上缓解了服务器的数据处理压力，可以解决当前以任务、流程为主要目的的管理软件的弊端，对于信息化推进的好处可想而知。

对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙，用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。开发者们想出了种种办法来解决这个问题，大多数都是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFrame来重现页面上的变更。例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFrame中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。