本人仅出于学习目的翻译，完整无误文章请参见原文！
面向Java开发者的Ajax：构建动态的Java应用程序
Ajax铺设了更好的开发Web应用的道路
级别：中级
Philip McCarthy (mailto:philmccarthy@gmail.com?subject=Build dynamic Java applications), Software Development Consultant, Independent Consultant
9月20日2005年
页面重载提出了一个在Web应用开发中最大的可用性障碍，对于java开发来说也是一个重大的挑战。在本系列中，作者Philip McCarthy介绍了通过后台通道的方法来创建动态Web应用的经验。Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。
Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
Ajax不是一个技术，它更像是一个模式—标志并描述有用的设计技巧的一种方法。对于刚了解它的许多开发人员来说，它是一种新的感觉，但是实现Ajax的所有组件都已存在了许多年。当前的热闹是因为在2004与2005年出现了一些基于Ajax的非常动态的WebUI，尤其是Google的GMail与Maps应用系统、与照片共享网站Flickr。这些UI充分地使用了后台通道，也被一些开发者称为“Web 2.0”，并导致了大家对Ajax应用兴趣的猛涨。
在本系列中，我将给出所有你需要的开发你自己的Ajax应用的工具。在这第一篇文章中，我将解释在Ajax背后的概念，示范为基于Web的应用系统创建一个Ajax接口的基本步骤。我将使用示例代码来示范实现Ajax动态接口的服务器端Java代码与客户端JavaScript脚本。最后，我将指出一些Ajax方法中易犯的错误，以及在创建Ajax应用时应该考虑的广泛范围内的可用性与易访问性方面的问题。
一个更好的购物车
你可以使用Ajax来加强传统的Web应用，通过消除页面载入来使交互更流畅。为了示范它，我将使用一个简单的，能动态更新加入的物品购物车。结合一个在线商店，这个方法可以不用等待点击后的页面重载，而让我们继续浏览并挑选物品到购物车中。虽然，本文中的代码针对购物车例子，但其中展示的技术可以用到其它的Ajax应用中。列表1中展示了购物车示例所使用的HTML代码。在整篇文章中，我都将会引用到这些HTML代码。
列表1：购物车示例的相关代码片断
<!-- Table of products from store's catalog, one row per item -->
<th>Name</th> <th>Description</th> <th>Price</th> <th></th>
...
<tr>
<!-- Item details -->
<td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
<td>
<!-- Click button to add item to cart via Ajax request -->
<button onclick="addToCart('hat001')">Add to Cart</button>
</td>
</tr>
...
<!-- Representation of shopping cart, updated asynchronously -->
<ul id="cart-contents">
<!-- List-items will be added here for each item in the cart -->
</ul>
<!-- Total cost of items in cart displayed inside span element -->
Total cost: <span id="total">$0.00</span>
Ajax处理过程
一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
在Java Web服务器上，到达的请求与任何其它HttpServletRequest一样。在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到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
/*
* 返回一个新建的XMLHttpRequest对象，若浏览器不支持则失败
*/
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
// 在非Microsoft浏览器中创建XMLHttpRequest对象
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//通过MS ActiveX创建XMLHttpRequest
try {
// 尝试按新版InternetExplorer方法创建
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// 创建请求的ActiveX对象失败
try {
// 尝试按老版InternetExplorer方法创建
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// 不能通过ActiveX创建XMLHttpRequest
}
}
}
return xmlreq;
}
稍后，我将讨论如何对待不支持XMLHttpReauest的浏览器的一些技巧。现在，列表2中展示的示例函数将总是可以返回一个XMLHttpReauest实例。
回到购物车例子的场景中，只要用户针对某一个目录条目点击了Add to Cart按钮，我就要调用一个Ajax交互。名为addToCart()的onclick函数通过Ajax调用（如列表1中所示）来负责更新购物车的状态。在列表3中，addToCart()要做的第一件事就是通过调用newXMLHttpReauest函数（如列表2中所示）来获取一个XMLHttpRequest的实例，并且注册一个回调函数来接受服务器响应（我将在稍后详细解释，请参见列表6）。
因为，此请求将会修改服务器状态，我将使用一个HTTP POST来处理它。通过POST传送数据需要三个步骤：首先，我需要打开一个到进行通讯的服务器资源的POST连接—在现在例子中是一个URL映射为cart.do的服务器端servlet。下一步，设置XMLHttpRequest的头信息，以标志请求的内容为form-encoded。最后，将form-encoded数据作为请求体，并发送此请求。
列表3中集中展示了这些步骤。
列表3：发送一个添加到购物车XMLHttpRequest
/*
* 通过产品编码，在购物车中添加一个条目
* itemCode – 需要添加条目的产品编码
*/
function addToCart(itemCode) {
// 获取一个XMLHttpRequest实例
var req = newXMLHttpRequest();
// 设置用来从请求对象接收回调通知的句柄函数
var handlerFunction = getReadyStateHandler(req, updateCart);
req.onreadystatechange = handlerFunction;
// 打开一个联接到购物车servlet的HTTP POST联接
// 第三个参数表示请求是异步的
req.open("POST", "cart.do", true);
// 指示请求体包含form数据
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 发送标志需要添加到购物车中条目的form-encoded数据
req.send("action=add&item="+itemCode);
}
结合以上内容，你可以了解到Ajax处理过程的第一部分—就是在客户端创建并发送HTTP请求。下一步是用来处理请求的Java Servlet代码。
Servlet请求处理
通过一个servlet来处理XMLHttpRequest与处理一个来自浏览器的普通的HTTP请求基本上相似。可以通过调用HttpServletRequest.getParameter()来获取由POST请求体传送过来的form-encoded数据。Ajax请求也与普通的WEB请求样都成为此应用同一HttpSession会话进程的一部分。这对于购物车例子来说很有肜，因为我们可以通过会话将多个请求的状态都保存到同一个JavaBean购物车对象中，并可以序列化。
列表4是处理Ajax请求并更新购物车的简单servlet的代码片断。从用户会话中检索出一个Cart Bean，并按请求的参数更新它。之后Cart Bean被序列化到XML，并被写回ServletRespone。注意，一定要将响应内容的类型设置为application/xml，否则，XMLHttpRequest将不能将响应内容解析为一个XML DOM。
列表4：处理Ajax请求的Servlet代码
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws java.io.IOException {
Cart cart = getCartFromSession(req);
String action = req.getParameter("action");
String item = req.getParameter("item");
if ((action != null)&&(item != null)) {
// 在购物车中添加或移除一个条目
if ("add".equals(action)) {
cart.addItem(item);
} else if ("remove".equals(action)) {
cart.removeItems(item);
}
}
// 将购物车状态序列化到XML
String cartXml = cart.toXml();
// 将XML写入response.
res.setContentType("application/xml");
res.getWriter().write(cartXml);
}
列表5展示了由Cart.toXml()方法生成的XML。注意到生成的cart元素的属性，是一个通过System.currentTimeMillis()生成的时间戳。
列表5：Cart对象序列化得到的XML
<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
<item code="hat001">
<name>Hat</name>
<quantity>2</quantity>
</item>
<item code="cha001">
<name>Chair</name>
<quantity>1</quantity>
</item>
<item code="dog001">
<name>Dog</name>
<quantity>1</quantity>
</item>
</cart>
如果你观察一下下载站点提供的例子应用源码中的Cart.java，你将会看到它通过简单地追加字符串来生成XML。对于本例子来说，它已经足够了，我将会在本系统文章的以后一期中介绍一些更好的方法。
现在你知道了CartServlet如何响应一个XMLHttpRequest。下一步是返回到客户端，如何用服务器响应来更新页面状态。
通过JavaScript来处理服务器响应
XMLHttpRequest的readyState属性是一个给出请求生命周期状态的数字值。它从表示“未初始化”的0变化到表示“完成”的4。每次readyState改变时，都会引发readystatechange事件，通过onreadystatechange属性配置回调处理函数将会被调用。
在列表3中，你已看到通过调用函数getReadyStateHandler()创建了一个处理函数，并被配置给onreadystatechange属性。getReadyStateHandler()使用了这样的事实：函数是JavaScript中的主要对象。这意味着，函数可以作为参数被传递到其它函数，并且可以创建并返回其它函数。getReadystateHandler()要做是就是返回一个函数，来检查XMLHttpRequet是否已经完成处理，并传递XML服务器响应到由调用者指定的处理函数。列表6是getReadyStateHandler()的代码。
列表6：函数getReadyStateHandler()
/*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes its XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {
// 返回一个监听XMLHttpRequest实例的匿名函数
return function () {
// 如果请求的状态是“完成”
if (req.readyState == 4) {
// 检查是否成功接收了服务器响应
if (req.status == 200) {
// 将载有响应信息的XML传递到处理函数
responseXmlHandler(req.responseXML);
} else {
// 有HTTP问题发生
alert("HTTP error: "+req.status);
}
}
}
}
HTTP状态码
在列表6中，XMLHttpRequest的status属性被测试用来确定请求是否成功完成。当处理简单的GET与POST请求，你可以认为只要不是200（OK）的状态就表示发生了错误。若服务器发送了一个重定向响应（例如，301或302），浏览器会透明地完成重定向并从新位置获取相应的资源；XMLHttpRequest不会看到重定向状态码。同时，浏览器自动添加一个缓存控制：对于所有XMLHttpRequest都使用no-cache header，这样客户端代码就可以不用处理304（not-modified）响应。
关于getReadyStateHandler()
getReadyStateHandler()是相对比较复杂的一段代码，特别当你不能熟悉阅读JavaScript时。折中方案是在你的JavaScript库中包含此函数，你可以简单地处理Ajax服务器响应，而不用去注意XMLHttpRequest的内部细节。重要是你自己要理解在代码中如何使用getReadyStateHandler()。
在列表3中，你看到getReadyStateHandler()被这样调用：
handlerFunction=getReadyStateHandler(req,updateCart)。
由它返回的函数将会检查在req变量中的XMLHttpRequest是否已完成，并调用由updateCart指定的回调方法处理响应XML。
提取购物车数据
列表7中展示了updateCart（）中的代码。此函数使用DOM来解析购物车XML文档，并更新WEB页面（参见列表1）来反映新的购物车内容。注意对用来提取数据的XML DOM的调用。Cart元素上生成的属性，即序列化时生成的时间戳，通过检测它可以保证不会用老的数据来覆盖新的购物车数据。Ajax请求天生就是异步的，通过这个检测可以有效避免在过程外到达的服务器响应的干扰。
列表7：更新页面来反映出购物车XML文档内容
function updateCart(cartXML) {
// 从文档中获取根元素“cart”
var cart = cartXML.getElementsByTagName("cart")[0];
// 保证此文档是最新的
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
// 清除HTML列表，用来显示购物车内容
var contents = document.getElementById("cart-contents");
contents.innerHTML = "";
// 在购物车内按条目循环
var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) {
var item = items[I];
// 从name与quantity元素中提取文本节点
var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue;
// 为条目创建并添加到HTML列表中
var li = document.createElement("li");
li.appendChild(document.createTextNode(name+" x "+quantity));
contents.appendChild(li);
}
}
// 更新购物车的金额累计
document.getElementById("total").innerHTML = cart.getAttribute("total");
}
到现在，关于Ajax处理过程的教程已经结束，也许你想让应用运行起来，并看看它的实际运作（参见下载部分）。这个例子非常简单，有非常大的改进的余地。比如，我在服务器端代码中包含了从购物车中移除条目的代码，但从客户端UI中没有访问的途径。作为一个练习，尝试在现有的JavaScript基础上实际这个功能。
使用Ajax的挑战
与任何技术一样，使用Ajax在相当多的方面都可能范错误。我在这儿讨论的问题目前都缺少解决方案，并将会随着Ajax的成熟而解决或提高。随着开发Ajax应用经验的不断获取，开发者社区中将会出现最好的实践经验与指导方针。
XMLHttpRequest的有效性
Ajax开发者面对的一个最大问题是当XMLHttpRequest不可用时如何反应。虽然大部分现代浏览器支持XMLHttpRequest，但还是有少量的用户，他们的浏览器不能支持，或由于浏览器安全设置而阻止对XMLHttpRequest的使用。若你的Web应用发布于公司内部的Intranet上，你很可能可以指定支持哪种浏览器，并可以确保XMLHttpRequest是可用的。若你在公共WEB上发布，则你必须意识到由于假定XMLHttpRequest是可用的，所有就阻止了老浏览器、手持设备浏览器等等用户来使用你的系统。
然而，你应该尽力保证应用系统“正常降级”使用，在系统中保留适用于不支持XMLHttpRequest的浏览器的功能。在购物车例子中，最好的方法是有一个Add to Cart按钮，可以进行常规的提交处理，并刷新页面来反映购物车状态的变化。Ajax行卫可以在页面被载入时通过JavaScript添加到页面中，只在XMLHttpRequest可用的情况下，为每个Add to Cart按钮加上JavaScript处理函数。另一个方法是在用户登录时检测XMLHttpRequest，再决定是提供Ajax版本还是常规基于form提交的版本。
可用性考虑
围绕着Ajax应用的大部分问题都是很普通的问题。例如，让用户知道他们的输入已经被注册并处理，是很重要的，因为在XMLHttpRequest处理过程中并不能提供通常的漏斗旋转光标。一种方法是将“确认”按扭上的文本替换为“正在更新中…”，以避免用户在等待响应时多次点击按钮。
另一个问题是，用户可能没有注意到他们正在观看的页面已经被更新。可以通过使用各种视觉技巧来将用户的眼光吸引到页面的更新区域。还有一个问题是通过Ajax更新页面打断了浏览器“退回前页”按钮的正常工作，地址栏中的URL不能反映页面的全部状态，并且不能使用书签功能。参见Resource章节中列出的网站地址上的文章来了解更多Ajax应用关于可用性方面的问题。
服务器负载
使用Ajax界面代替传统的基于form的界面可能戏剧性地增加传递到服务器的请求数量。例如，一个普通的Google搜索给服务器造成一次命中，并在用户确认搜索表单时发生。然而，Google Suggest，将会试图自动完成你的搜索词，在用户打字时将会往服务器发送多个请求。在开发一个Ajax应用时，要注意到你将会发送多少请求到用户器端，以及服务器的负载指标。你可以通过在客户端适当地缓存请求、与服务器响应来缓减负载压力。你也应该在设计Ajax应用时尽量在客户端处理更多的逻辑，而不用与服务器端通讯。
处理异步
一定要记住，没有任何东西可以保证XMLHttpRequest将会按照它们被发送的顺序来依次结束。实际上，你在设计系统时，脑子里应该始终假定它们不会按原来顺序结束。在购物车例子中，使用了一个最后更新的时间戳来保证最新的数据不会被改写。这个非常基本的方法可以在购物车场景中工作，但可能不能在其它情况下工作。在设计时刻就要考虑你该如何处理异步服务器响应。
结论
你现在应该对于Ajax的基本原则有了一个良好的了解，另外，你应该理解一些更高级的随Ajax方法而来的设计问题。创建一个成功的Ajax应用需要一系列的方法—从JavaScript UI设计到服务器端架构—但是你现在应该已经具备了需要使用到的Ajax核心知识。
There's good news if you're feeling daunted by the complexity of writing a large Ajax application using the techniques demonstrated here. Just as frameworks like Struts, Spring, and Hibernate have evolved to abstract Web application development away from the low-level details of the Servlet API and JDBC, so toolkits are appearing to ease Ajax development. Some of these focus solely on the client side, providing easy ways to add visual effects to your pages or streamlining the use of XMLHttpRequest. Others go further, providing means to automatically generate Ajax interfaces from server-side code. These frameworks do the heavy lifting for you, so that you can take a more high-level approach to Ajax development. I'll be looking at some of them in this series.
The Ajax community is fast moving, and there's a great deal of valuable information out there. Before reading the next installment in this series, I recommend that you consult the articles listed in the Resources section, especially if you're new to Ajax or client-side development. You should also take some time to study the example source code and think about ways to improve it.
In the next article in this series, I'll discuss the XMLHttpRequest API in more detail and suggest ways to create XML easily from your JavaBeans. I'll also show you alternatives to XML for Ajax data transfer, such as the JSON (JavaScript Object Notation) lightweight data-interchange format.
Download
Sample code j-ajax1.zip 8 KB FTP
Resources
Learn
"Beyond the DOM" (Dethe Elza, developerWorks, May 2005): Useful JavaScript techniques for XML document access.
"Ajax and scripting Web services with E4X" (Paul Fremantle and Anthony Elder, developerWorks, April 2005): Use Ajax to make SOAP calls in browsers that support the E4X JavaScript extension.
"Ajax: A New Approach to Web Applications" (Jesse James Garrett, Adaptive Path, February 2005): The seminal essay that gave Ajax its name.
The Java BluePrints Solutions Catalog: Documents the application of Ajax to several common Web application scenarios.
AjaxPatterns.org: A wiki that includes several UI techniques to improve Ajax applications.
XMLHttpRequest Usability Guidelines: Suggestions for using Ajax to enhance user experience.
Ajax Mistakes: Usability problems that Ajax applications should avoid.
The Java technology zone: Find articles about every aspect of Java programming.
Get products and technologies
Mozilla Firefox: The DOM Inspector and JavaScript Debugger extension take a lot of the pain out of Ajax development.
Discuss
Participate in the discussion forum for this content.
developerWorks blogs: Get involved in the developerWorks community.
About the author
Philip McCarthy is software development consultant specializing in Java and Web technologies. He is currently working on Hewlett Packard's Digital Media Platform project at HP Labs, Bristol. In recent years Phil has developed several rich Web clients employing asynchronous server communication and DOM scripting. He is glad we now have a name for them. You can get in touch with Phil at philmccarthy@gmail.com.
