面向Java程序员的AJAX本文由chinesehoo贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 面向 Java 开发人员的 Ajax: 构 建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 级别： 中级 文档选项 Philip McCarthy (philmccarthygmail.com), 软件开 发顾问, 独立咨询顾问 打印本页 2005 年 10 月 20 日 将此页作为电子邮件 在 Web 应用程序开发中， 页面重载循环是最大的一个使 发送 用障碍，对于 Java 开发人员来说也是一个严峻的挑 讨论 战。在这个系列中，作者 Philip McCarthy 介绍了一种 样例代码 创建动态应用程序体验的开创性方式。Ajax（异步 JavaScript 和 XML）是一种编程技术，它允许为基于 Java 的 Web 应用程序 把 Java 技术、XML 和 JavaScript 组合起来，从而打破页面重载的范式。 Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用 客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷 新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态 的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程 序。 Ajax 不是一项技术，而更像是一个 模式 一种识别和描述有用的设计技 术的方式。Ajax 是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实 现 Ajax 应用程序的组件都已经存在若干年了。 它目前受到重视是因为在 2004 和 2005 年出现了一些基于 Ajax 技术的非常棒的动态 Web UI，最著名的就是 Google 的 GMail 和 Maps 应用程序，以及照片共享站点 Flickr。这些用户界 面具有足够的开创性，有些开发人员称之为“Web 2.0”，因此对 Ajax 应用程 序的兴趣飞速上升。 在这个系列中，我将提供使用 Ajax 开发应用程序需要的全部工具 。在第一篇 文章中，我将解释 Ajax 背后的概念，演示为基于 Java 的 Web 应用程序创建 Ajax 界面的基本步骤。 我将使用代码示例演示让 Ajax 应用程序如此动态的服 务器端 Java 代码和客户端 JavaScript。最后，我将指出 Ajax 方式的一些不 足， 以及在创建 Ajax 应用程序时应当考虑的一些更广的可用性和访问性问题。 更好的购物车 可以用 Ajax 增强传统的 Web 应用程序，通过消除页面装入从而简化交互。为 了演示这一点，我采用一个简单的购物车示例，在向里面添加项目时，它会动 态更新。这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车 中添加项目，而不必在每次点击之后都等候完整的页面更新。虽然这篇文章中 的有些代码特定于购物车示例，但是演示的技术可以应用于任何 Ajax 应用程 序。清单 1 显示了购物车示例使用的有关 HTML 代码，整篇文章中都会使用这 个 HTML。 清单 1. 购物车示例的有关片断 NameDescriptionPrice HatStylish bowler hat$19.99 Add to Cart Total cost: $0.00 回页首 Ajax 往返过程 Ajax 交互开始于叫作 XMLHttpRequest 的 JavaScript 对象。顾名思义，它允 许客户端脚本执行 HTTP 请求，并解析 XML 服务器响应。Ajax 往返过程的第 一步是创建 XMLHttpRequest 的实例。 XMLHttpRequest 对象上设置请求使用 在 的 HTTP 方法（GET 或 POST）以及目标 URL。 现在，您还记得 Ajax 的第一个 a 是代表 异步（asynchronous） 吗？在发送 HTTP 请求时，不想让浏览器挂着等候服务器响应。相反，您想让浏览器继续对 用户与页面的交互进行响应，并在服务器响应到达时再进行处理。为了实现这 个要求，可以在 XMLHttpRequest 上注册一个回调函数，然后异步地分 派 XMLHttpRequest。然后控制就会返回浏览器，当服务器响应到达时，会调用 回调函数。 在 Java Web 服务器上，请求同其他 HttpServletRequest 一样到达。在解析 了请求参数之后，servlet 调用必要的应用程序逻辑，把响应序列化成 XML， 并把 XML 写入 HttpServletResponse。 回到客户端时，现在调用注册在 XMLHttpRequest 上的回调函数，处理服务器 返回的 XML 文档。最后，根据服务器返回的数据，用 JavaScript 操纵页面的 HTML DOM，把用户界面更新。图 1 是 Ajax 往返过程的顺序图。 图 1. Ajax 往返过程 现在您对 Ajax 往返过程有了一个高层面的认识。下面我将放大其中的每一步 骤，进行更详细的观察。如果过程中迷了路，请回头看图 1 由于 Ajax 方 式的异步性质，所以顺序并非十分简单。 回页首 分派 XMLHttpRequest 我将从 Ajax 序列的起点开始：创建和分派来自浏览器的 XMLHttpRequest。不 幸的是，不同的浏览器创建 XMLHttpRequest 的方法各不相同。清单 2 的 JavaScript 函数消除了这些依赖于浏览器的技巧， 它可以检测当前浏览器要使 用的正确方式，并返回一个可以使用的 XMLHttpRequest。最好是把它当作辅助 代码：只要把它拷贝到 JavaScript 库，并在需要 XMLHttpRequest 的时候使 用它就可以了。 清单 2. 创建跨浏览器的 XMLHttpRequest /* * Returns a new XMLHttpRequest object, or false if this browser * doesnt support it */ function newXMLHttpRequest() var xmlreq = false; if (window.XMLHttpRequest) / Create XMLHttpRequest object in non-Microsoft browsers xmlreq = new XMLHttpRequest(); else if (window.ActiveXObject) / Create XMLHttpRequest via MS ActiveX try / Try to create XMLHttpRequest in later versions / of Internet Explorer xmlreq = new ActiveXObject(Msxml2.XMLHTTP); catch (e1) / Failed to create required ActiveXObject try / Try version supported by older versions / of Internet Explorer xmlreq = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) / Unable to create an XMLHttpRequest with ActiveX return xmlreq; 稍后我将讨论处理那些不支持 XMLHttpRequest 的浏览器的技术。目前，示例 假设清单 2 的 newXMLHttpRequest 函数总能返回 XMLHttpRequest 实例。 返回示例的购物车场景，我想要当用户在目录项目上点击 Add to Cart 时启动 Ajax 交互。 名为 addToCart() 的 onclick 处理函数负责通过 Ajax 调用来更 新购物车的状态（请参阅 清单 1）。正如清单 3 所示，addToCart() 需要做 的第一件事是通过调用清单 2 的 newXMLHttpRequest() 函数得 到 XMLHttpRequest 对象。接下来，它注册一个回调函数，用来接收服务器响 应（我稍后再详细解释这一步；请参阅 清单 6）。 因为请求会修改服务器上的状态，所以我将用 HTTP POST 做这个工作。通 过 POST 发送数据要求三个步骤。第一，需要打开与要通信的服务器资源 的 POST 连接 在这个示例中， 服务器资源是一个映射到 URL cart.do 的 servlet。然后，我在 XMLHttpRequest 上设置一个头，指明请求的内容是表单 编码的数据。最后，我用表单编码的数据作为请求体发送请求。 清单 3 把这些步骤放在了一起。 清单 3. 分派 Add to Cart XMLHttpRequest /* * Adds an item, identified by its product code, to the shopping cart * itemCode - product code of the item to add. */ function addToCart(itemCode) / Obtain an XMLHttpRequest instance var req = newXMLHttpRequest(); / Set the handler function to receive callback notifications / from the request object var handlerFunction = getReadyStateHandler(req, updateCart); req.onreadystatechange = handlerFunction; / Open an HTTP POST connection to the shopping cart servlet. / Third parameter specifies request is asynchronous. req.open(POST, cart.do, true); / Specify that the body of the request contains form data req.setRequestHeader(Content-Type, application/x-www-form-urlencoded); / Send form encoded data stating that I want to add the / specified item to the cart. req.send(action=add&item=+itemCode); 这就是建立 Ajax 往返过程的第一部分，即创建和分派来自客户机的 HTTP 请 求。接下来是用来处理请求的 Java servlet 代码。 回页首 servlet 请求处理 用 servlet 处理 XMLHttpRequest，与处理普通的浏览器 HTTP 请求一样。可 以用 HttpServletRequest.getParameter() 得到在 POST 请求体中发送的表 单编码数据。Ajax 请求被放进与来自应用程序的常规 Web 请求