AJA开发智能Web应用程序.docxVIP

AJAX 开发智能 Web 应用程序 【字体：大 中 小】 【打印本稿】 2006-5-6 10:09:37 (16524) 一. 什么是 AJAX? 这个名字代表了异步 JavaScript+XMLHTTPRequest，并且意味着你可以在基于浏览器的JavaScript 和服务器之间建立套接字通讯。其实 AJAX 并不是一种新技术，而是已经成功地用于现代浏览器中的若干成功技术的可能性组合。所有的 AJAX 应用程序实现了一种“丰富的”UI——这是通过 JavaScript 操作 HTML 文档对象模型并且经由 XMLHttpRequest 实现的精 确 定 位 的 数 据 检 索 来 实 现 的 。 典 型 的 示 例 AJAX 应 用 程 序 是 Google Labs()的 Google Maps 和 Google Suggest。这些应用程序现场监视用户输入并且提供实时的页面更新。最重要的是，在用户通过地图导航或输入一个查找字符串的同时，这些事件不需要刷新页面。 事实上，支持这些令人感到惊讶的应用的技术已经出现一段时间了，尽管它们要求复杂的技能以及使用浏览器的技巧。一些专利产品就提供了相似的能力——如 Macromedia Flash 插件，Java Applets 或.NET 运行时——在达到实用上已经有一段时间了。把一种可与服务器通话的脚本组件引入到浏览器中的思想早在 IE 5.0 中就已经存在。Firefox 和其它流行的浏览器也加入到浏览器大军中并以一种内置对象形式支持 XMLHTTPRequest。随着跨平台浏览器的出现，这些技术得到了认可并在 2004 年 3 月一家称为 Adaptive Path 的公司中正式提出了 AJAX。 简而言之，由于来自于 Google 的支持和安装了一点可用的浏览器技术，加上为了一种 更好的用户体验，每个人都在把客户端技术添加到 Web 应用程序上。二. AJAX 与传统应用程序的区别 一个传统 Web 应用程序模型实际上是一种基本的事件——用户被迫提交表单以实现页面交换。也就是说，表单提交和页面传送无法得到保证 :还有更坏的情形——用户需要再次点击。这与 AJAX 截然不同-——数据跨过线路而不是完整的 HTML 页面传输。这种数据交换是经由特定的浏览器对象:XMLHttpRequest 实现的;再由适当的逻辑来处理每个数据请求的结果，页面的特定区域而不是完整的页面被更新。结果是更快的速度，更少的拥挤和更好的信息传送控制。 传统型click-refreshWeb 应用程序强迫用户中断工作过程而等待页面的重装。通过引入AJAX 技术，一个客户端脚本能够异步地与服务器通话，而用户仍能保持输入数据。除了对用户透明之外，这样的异步意味着服务器可以有更多时间来处理请求。 传统 Web 应用程序把所有的处理代理到服务器并且强迫服务器进行状态管理。 AJAX 允许灵活划分应用程序逻辑以及客户和服务器之间的状态管理。这就消除了一种click-refresh依赖性并且提供更好的服务器可伸缩性。当该状态存储在客户端，你就不必跨 越服务器来维持会话或保存/结束状态-其使用期限是由客户端来定义的。三. AJAX——分布式的 MVC 尽管 AJAX 应用程序依靠 JavaScript 来实现描述层，然而处理能力和知识库仍然存在于 服务器上。此时，AJAX 应用程序大量的与 J2EE 服务器通讯——把数据输入/输出 Web 服务和 servlets。具有基于 AJAX 的描述层的 J2EE 应用程序和标准 J2EE 应用程序之间的区别首先在于，MVC 是通过线路分布的。通过使用 AJAX，视图是本地的，而模型和控制器是分布式的——这使得开发者能够灵活地决定哪些部件会是基于客户端的。具体地说，本地视图通过巧妙地操作 HTML DOM 而生成图形;控制器局部地处理用户输入并且根据开发者的判断扩展到服务器的处理——经由 HTTP 请求(Web 服务，XML/RPC 或其它)实现;模型的远程部分是根据客户端需要而下载的以达到实时更新客户端页面;并且状态是在客户端收集的。 在以后的 AJAX 文章中，我们将比较深入地讨论这里的每一种组件并提供有关它们联合在一起进行应用的示例。现在，先不多说，让我们详细地分析一个简单的 AJAX 示例。 四. 邮政区号校验和查询 我们将创建一个包含三个 INPUT 字段(Zip，City 和 State)的 HTML 页面。我们将保证， 只要用户输入邮政区号的前三个数字，该页面上的字段就会用第一个匹配的状态值填充。一 旦用户输入了所有五位邮政区号数，我们将立即决定和填充相应的城市。如果邮政区号无效 (在服务器的数据库没有找到)，那么我们将把邮政区号的边界设置为红色。这