Ajax构建动态的 Java 应用程序

面向Java 开发人员的Ajax: 构建动态的Java 应用程序Ajax 为更好的Web 应用程序铺平了道路级别: 中级Philip McCarthy , 软件开发顾问, 独立咨询顾问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. 购物车示例的有关片断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 * doesn't support it*/function newXMLHttpRequest() {var xmlreq = false;if (window.XMLHttpRequest) {// Create XMLHttpRequest object in non-Microsoft browsersxmlreq = new XMLHttpRequest();} else if (window.ActiveXObject) {// Create XMLHttpRequest via MS ActiveXtry {// Try to create XMLHttpRequest in later versions// of Internet Explorerxmlreq = new ActiveXObject("Msxml2.XMLHTTP");} catch (e1) {// Failed to create required ActiveXObjecttry {// Try version supported by older versions// of Internet Explorerxmlreq = 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这就是建立Ajax 往返过程的第一部分，即创建和分派来自客户机的HTTP 请求。

接下来是用来处理请求的Java servlet 代码。

servlet 请求处理用servlet 处理XMLHttpRequest，与处理普通的浏览器HTTP 请求一样。

可以用HttpServletRequest.getParameter()得到在POST 请求体中发送的表单编码数据。

Ajax 请求被放进与来自应用程序的常规Web 请求一样的HttpSession中。

对于示例购物车场景来说，这很有用，因为这让我可以把购物车状态封装在JavaBean 中，并在请求之间在会话中维持这个状态。

清单4 是处理Ajax 请求、更新购物车的简单servlet 的一部分。

Cart bean 是从用户会话中获得的，并根据请求参数更新它的状态。

然后Cart被序列化成XML，XML 又被写入ServletResponse。

重要的是把响应的内容类型设置为application/xml，否则XMLHttpRequest不会把响应内容解析成XML DOM。

清单 4. 处理Ajax 请求的servlet 代码清单5 显示了Cart.toXml()方法生成的示例XML。

它很简单。

请注意cart元素的generated属性，它是System.currentTimeMillis()生成的一个时间戳。

清单 5. Cart 对象的XML 序列化示例如果查看应用程序源代码（可以从下载一节得到）中的Cart.java，可以看到生成XML 的方式只是把字符串添加在一起。

虽然对这个示例来说足够了，但是对于从Java 代码生成XML 来说则是最差的方式。

我将在这个系列的下一期中介绍一些更好的方式。

现在您已经知道了CartServlet响应XMLHttpRequest的方式。

下一件事就是返回客户端，查看如何用XML 响应更新页面状态。

用JavaScript 进行响应处理XMLHttpRequest的readyState属性是一个数值，它指出请求生命周期的状态。

它从0（代表“未初始化”）变化到4（代表“完成”）。

每次readyState变化时，readystatechange事件就触发，由onreadystatechange属性指定的事件处理函数就被调用。

在清单3中已经看到了如何调用getReadyStateHandler()函数创建事件处理函数。

然后把这个事件处理函数分配给onreadystatechange属性。