《面向Java程序员的AJAX.doc》由会员分享，可在线阅读，更多相关《面向Java程序员的AJAX.doc（25页珍藏版）》请在金锄头文库上搜索。
1、面向Java程序员的AJAX本文由chinesehoo贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 面向 Java 开发人员的 Ajax: 构 建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 级别： 中级 文档选项 Philip McCarthy (), 软件开 发顾问, 独立咨询顾问 打印本页 2005 年 10 月 20 日 将此页作为电子邮件 在 Web 应用程序开发中， 页面重载循环是最大的一个使 发送 用障碍，对于 Java 开发人员来说也是一个严峻的挑 讨论 战。在这个系列中，作者 Philip McCar
2、thy 介绍了一种 样例代码 创建动态应用程序体验的开创性方式。Ajax（异步 JavaScript 和 XML）是一种编程技术，它允许为基于 Java 的 Web 应用程序 把 Java 技术、XML 和 JavaScript 组合起来，从而打破页面重载的范式。 Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用 客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷 新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态 的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程 序。 A
3、jax 不是一项技术，而更像是一个 模式 一种识别和描述有用的设计技 术的方式。Ajax 是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实 现 Ajax 应用程序的组件都已经存在若干年了。 它目前受到重视是因为在 2004 和 2005 年出现了一些基于 Ajax 技术的非常棒的动态 Web UI，最著名的就是 Google 的 GMail 和 Maps 应用程序，以及照片共享站点 Flickr。这些用户界 面具有足够的开创性，有些开发人员称之为“Web 2.0”，因此对 Ajax 应用程 序的兴趣飞速上升。 在这个系列中，我将提供使用 Ajax 开发应用程序需要的全部工具 。在第一篇
4、文章中，我将解释 Ajax 背后的概念，演示为基于 Java 的 Web 应用程序创建 Ajax 界面的基本步骤。 我将使用代码示例演示让 Ajax 应用程序如此动态的服 务器端 Java 代码和客户端 JavaScript。最后，我将指出 Ajax 方式的一些不 足， 以及在创建 Ajax 应用程序时应当考虑的一些更广的可用性和访问性问题。 更好的购物车 可以用 Ajax 增强传统的 Web 应用程序，通过消除页面装入从而简化交互。为 了演示这一点，我采用一个简单的购物车示例，在向里面添加项目时，它会动 态更新。这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车 中添加项目，而不必
5、在每次点击之后都等候完整的页面更新。虽然这篇文章中 的有些代码特定于购物车示例，但是演示的技术可以应用于任何 Ajax 应用程 序。清单 1 显示了购物车示例使用的有关 HTML 代码，整篇文章中都会使用这 个 HTML。 清单 1. 购物车示例的有关片断 NameDescriptionPrice HatStylish bowler hat$19.99 Add to Cart Total cost: $0.00 回页首 Ajax 往返过程 Ajax 交互开始于叫作 XMLHttpRequest 的 JavaScript 对象。顾名思义，它允 许客户端脚本执行 HTTP 请求，并解析 XML 服
6、务器响应。Ajax 往返过程的第 一步是创建 XMLHttpRequest 的实例。 XMLHttpRequest 对象上设置请求使用 在 的 HTTP 方法（GET 或 POST）以及目标 URL。 现在，您还记得 Ajax 的第一个 a 是代表 异步（asynchronous） 吗？在发送 HTTP 请求时，不想让浏览器挂着等候服务器响应。相反，您想让浏览器继续对 用户与页面的交互进行响应，并在服务器响应到达时再进行处理。为了实现这 个要求，可以在 XMLHttpRequest 上注册一个回调函数，然后异步地分 派 XMLHttpRequest。然后控制就会返回浏览器，当服务器响应到达时，
7、会调用 回调函数。 在 Java Web 服务器上，请求同其他 HttpServletRequest 一样到达。在解析 了请求参数之后，servlet 调用必要的应用程序逻辑，把响应序列化成 XML， 并把 XML 写入 HttpServletResponse。 回到客户端时，现在调用注册在 XMLHttpRequest 上的回调函数，处理服务器 返回的 XML 文档。最后，根据服务器返回的数据，用 JavaScript 操纵页面的 HTML DOM，把用户界面更新。图 1 是 Ajax 往返过程的顺序图。 图 1. Ajax 往返过程 现在您对 Ajax 往返过程有了一个高层面的认识。下面我
8、将放大其中的每一步 骤，进行更详细的观察。如果过程中迷了路，请回头看图 1 由于 Ajax 方 式的异步性质，所以顺序并非十分简单。 回页首 分派 XMLHttpRequest 我将从 Ajax 序列的起点开始：创建和分派来自浏览器的 XMLHttpRequest。不 幸的是，不同的浏览器创建 XMLHttpRequest 的方法各不相同。清单 2 的 JavaScript 函数消除了这些依赖于浏览器的技巧， 它可以检测当前浏览器要使 用的正确方式，并返回一个可以使用的 XMLHttpRequest。最好是把它当作辅助 代码：只要把它拷贝到 JavaScript 库，并在需要 XMLHttpR
9、equest 的时候使 用它就可以了。 清单 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(
10、); 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 Int
11、ernet 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()
12、的 onclick 处理函数负责通过 Ajax 调用来更 新购物车的状态（请参阅 清单 1）。正如清单 3 所示，addToCart() 需要做 的第一件事是通过调用清单 2 的 newXMLHttpRequest() 函数得 到 XMLHttpRequest 对象。接下来，它注册一个回调函数，用来接收服务器响 应（我稍后再详细解释这一步；请参阅 清单 6）。 因为请求会修改服务器上的状态，所以我将用 HTTP POST 做这个工作。通 过 POST 发送数据要求三个步骤。第一，需要打开与要通信的服务器资源 的 POST 连接 在这个示例中， 服务器资源是一个映射到 URL cart.do 的
13、 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 XMLHttpR
14、equest 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. /
15、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 请求
