面向Java程序员的AJAX

面向Java开发人员的Ajax:构建动态的Java应用程序Ajax为更好的Web应用程序铺平了道路级别：中级PhilipMcCarthy([e-mail]),软件开发顾问,独立咨询顾问2005年10月20日在Web应用程序开发中，页面重载循环是最大的一个使用障碍，对于Java™开发人员来说也是一个严峻的挑战。在这个系列中，作者PhilipMcCarthy介绍了一种创建动态应用程序体验的开创性方式。Ajax（异步JavaScript和XML）是一种编程技术，它允许为基于Java的Web应用程序把Java技术、XML和JavaScript组合起来，从而打破页面重载的范式。Ajax（即异步JavaScript和XML）是一种Web应用程序开发的手段，它采用客户端脚本与Web服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新Web页面。使用Ajax，可以创建更加丰富、更加动态的Web应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。Ajax不是一项技术，而更像是一个模式——一种识别和描述有用的设计技术的方式。Ajax是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实现Ajax应用程序的组件都已经存在若干年了。它目前受到重视是因为在2004和2005年出现了一些基于Ajax技术的非常棒的动态WebUI，最著名的就是Google的GMail和Maps应用程序，以及照片共享站点Flickr。这些用户界面具有足够的开创性，有些开发人员称之为“Web2.0”，因此对Ajax应用程序的兴趣飞速上升。在这个系列中，我将提供使用Ajax开发应用程序需要的全部工具。在第一篇文章中，我将解释Ajax背后的概念，演示为基于Java的Web应用程序创建Ajax界面的基本步骤。我将使用代码示例演示让Ajax应用程序如此动态的服务器端Java代码和客户端JavaScript。最后，我将指出Ajax方式的一些不足，以及在创建Ajax应用程序时应当考虑的一些更广的可用性和访问性问题。更好的购物车可以用Ajax增强传统的Web应用程序，通过消除页面装入从而简化交互。为了演示这一点，我采用一个简单的购物车示例，在向里面添加项目时，它会动态更新。这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车中添加项目，而不必在每次点击之后都等候完整的页面更新。虽然这篇文章中的有些代码特定于购物车示例，但是演示的技术可以应用于任何Ajax应用程序。清单1显示了购物车示例使用的有关HTML代码，整篇文章中都会使用这个HTML。清单1.购物车示例的有关片断文档选项打印本页将此页作为电子邮件发送讨论样例代码!--Tableofproductsfromstore'scatalog,onerowperitem--thName/ththDescription/ththPrice/thth/th...tr!--Itemdetails--tdHat/tdtdStylishbowlerhat/tdtd$19.99/tdtd!--ClickbuttontoadditemtocartviaAjaxrequest--buttononclick=addToCart('hat001')AddtoCart/button/td/tr...!--Representationofshoppingcart,updatedasynchronously--ulid=cart-contents!--List-itemswillbeaddedhereforeachiteminthecart--/ul!--Totalcostofitemsincartdisplayedinsidespanelement--Totalcost:spanid=total$0.00/spanAjax往返过程Ajax交互开始于叫作XMLHttpRequest的JavaScript对象。顾名思义，它允许客户端脚本执行HTTP请求，并解析XML服务器响应。Ajax往返过程的第一步是创建XMLHttpRequest的实例。在XMLHttpRequest对象上设置请求使用的HTTP方法（GET或POST）以及目标URL。现在，您还记得Ajax的第一个a是代表异步（asynchronous）吗？在发送HTTP请求时，不想让浏览器挂着等候服务器响应。相反，您想让浏览器继续对用户与页面的交互进行响应，并在服务器响应到达时再进行处理。为了实现这个要求，可以在XMLHttpRequest上注册一个回调函数，然后异步地分派XMLHttpRequest。然后控制就会返回浏览器，当服务器响应到达时，会调用回调函数。在JavaWeb服务器上，请求同其他HttpServletRequest一样到达。在解析了请求参数之后，servlet调用必要的应用程序逻辑，把响应序列化成XML，并把XML写入HttpServletResponse。回到客户端时，现在调用注册在XMLHttpRequest上的回调函数，处理服务回页首器返回的XML文档。最后，根据服务器返回的数据，用JavaScript操纵页面的HTMLDOM，把用户界面更新。图1是Ajax往返过程的顺序图。图1.Ajax往返过程现在您对Ajax往返过程有了一个高层面的认识。下面我将放大其中的每一步骤，进行更详细的观察。如果过程中迷了路，请回头看图1——由于Ajax方式的异步性质，所以顺序并非十分简单。分派XMLHttpRequest我将从Ajax序列的起点开始：创建和分派来自浏览器的XMLHttpRequest。不幸的是，不同的浏览器创建XMLHttpRequest的方法各不相同。清单2的JavaScript函数消除了这些依赖于浏览器的技巧，它可以检测当前浏览器要使用的正确方式，并返回一个可以使用的XMLHttpRequest。最好是把它当作辅助代码：只要把它拷贝到JavaScript库，并在需要XMLHttpRequest的时候使用它就可以了。清单2.创建跨浏览器的XMLHttpRequest/**ReturnsanewXMLHttpRequestobject,orfalseifthisbrowser*doesn'tsupportit*/functionnewXMLHttpRequest(){varxmlreq=false;if(window.XMLHttpRequest){//CreateXMLHttpRequestobjectinnon-Microsoftbrowsersxmlreq=newXMLHttpRequest();}elseif(window.ActiveXObject){//CreateXMLHttpRequestviaMSActiveXtry{//TrytocreateXMLHttpRequestinlaterversions//ofInternetExplorerxmlreq=newActiveXObject(Msxml2.XMLHTTP);}catch(e1){//FailedtocreaterequiredActiveXObjecttry{//Tryversionsupportedbyolderversions//ofInternetExplorerxmlreq=newActiveXObject(Microsoft.XMLHTTP);}catch(e2){//UnabletocreateanXMLHttpRequestwithActiveX}}}returnxmlreq;}稍后我将讨论处理那些不支持XMLHttpRequest的浏览器的技术。目前，示回页首例假设清单2的newXMLHttpRequest函数总能返回XMLHttpRequest实例。返回示例的购物车场景，我想要当用户在目录项目上点击AddtoCart时启动Ajax交互。名为addToCart()的onclick处理函数负责通过Ajax调用来更新购物车的状态（请参阅清单1）。正如清单3所示，addToCart()需要做的第一件事是通过调用清单2的newXMLHttpRequest()函数得到XMLHttpRequest对象。接下来，它注册一个回调函数，用来接收服务器响应（我稍后再详细解释这一步；请参阅清单6）。因为请求会修改服务器上的状态，所以我将用HTTPPOST做这个工作。通过POST发送数据要求三个步骤。第一，需要打开与要通信的服务器资源的POST连接——在这个示例中，服务器资源是一个映射到URLcart.do的servlet。然后，我在XMLHttpRequest上设置一个头，指明请求的内容是表单编码的数据。最后，我用表单编码的数据作为请求体发送请求。清单3把这些步骤放在了一起。清单3.分派AddtoCartXMLHttpRequest/**Addsanitem,identifiedbyitsproductcode,totheshoppingcart*itemCode-productcodeoftheitemtoadd.*/functionaddToCart(itemCode){//ObtainanXMLHttpRequestinstancevarreq=newXMLHttpRequest();//Setthehandlerfunctiontoreceivecallbacknotifications//fromtherequestobjectvarhandlerFunction=getReadyStateHandler(req,updateCart);req.onreadystatechange=handlerFunction;//OpenanHTTPPOSTconnectiontotheshoppingcartservlet.//Thirdparameterspecifiesrequestisasynchronous.req.open(POST,cart.do,true);//Specifythatthebodyoftherequestcontainsformdatareq.setRequestHeader(Content-Type,application/x-);//SendformencodeddatastatingthatIwanttoaddthe//specifieditemtothecart.req.send(action=add&item=+itemCode);}这就是建立Ajax往返过程的第一部分，即创建和分派来自客户机的HTTP请求。接下来是用来处理请求的Javaservlet代码。servlet请求处理用servlet处理XMLHttpRequest，与处理普通的浏览器HTTP请求一样。可以用HttpServletRequest.getParameter()得到在POST请求体中发送的表单编码数据。Ajax请求被放进与来自应用程序的常规Web请求一样的HttpSession中。对于示例购物车场景来说，这很有用，因为这让我可以把购物车状态封装在JavaBean中，并在请求之间在会话中维持这个状态。清单4是处理Ajax请求、更新购物车的简单servlet的一部分。Cartbean是从用户会话中获得的，并根据请求参数更新它的状态。然后Cart被序列化成XML，XML又被写入ServletResponse。重要的是把响应的内容类型设置为application/xml，否则XMLHttpRequest不会把响应内容解析成XMLDOM。清单4.处理Ajax请求的servlet代码publicvoiddoPost(HttpServletRequestreq,HttpServletResponseres)throwsjava.io.IOException{Cartcart=getCart