2024年面向Java程序员的AJAX.doc

面对Java开发人员的Ajax:构建动态的Java应用程序
Ajax为愈加好的Web应用程序铺平了道路

文档选项
HYPERLINK"javascript:print()"打印本页HYPERLINK"javascript:document.email.submit();"将此页作为电子邮件发送HYPERLINK"http://www.ibm.com/developerworks/community/"讨论HYPERLINK"http://www.ibm.com/developerworks/cn/java/j-ajax1/"\l"download"样例代码级别：中级
HYPERLINK"http://www.ibm.com/developerworks/cn/java/j-ajax1/"\l"author"PhilipMcCarthy(HYPERLINK"mailto:?subject=构建动态的%20Java%20应用程序"),软件开发顾问,独立咨询顾问
年10月20日
在Web应用程序开发中，页面重载循环是最大的一个使用障碍，对于Java™开发人员来说也是一个严峻的挑战。在这个系列中，作者PhilipMcCarthy简介了一个创建动态应用程序体验的开创性方式。Ajax（异步JavaScript和XML）是一个编程技术，它允许为基于Java的Web应用程序把Java技术、XML和JavaScript组合起来，从而打破页面重载的范式。
Ajax（即异步JavaScript和XML）是一个Web应用程序开发的伎俩，它采取客户端脚本与Web服务器互换数据。因此，无须采取会中断交互的完整页面刷新，就能够动态地更新Web页面。使用Ajax，能够创建愈加丰富、愈加动态的Web应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。
Ajax不是一项技术，而更像是一个模式——一个识别和描述有用的设计技术的方式。Ajax是新颖的，因为许多开发人员才刚才开始懂得它，不过所有实现Ajax应用程序的组件都已经存在若干年了。它目前受到重视是因为在和年出现了某些基于Ajax技术的非常棒的动态WebUI，最知名的就是谷歌的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-->
<th>Name</th><th>Description</th><th>Price</th><th></th>
...
<tr>
<!--Itemdetails-->
<td>Hat</td><td>Stylishbowlerhat</td><td>$19.99</td>
<td>
<!--ClickbuttontoadditemtocartviaAjaxrequest-->
<buttononclick="addToCart('hat001')">AddtoCart</button>
</td>
</tr>
...
<!--Representationofshoppingcart,updatedasynchronously-->
<ulid="cart-contents">
<!--List-itemswillbeaddedhereforeachiteminthecart-->

</ul>
<!--Totalcostofitemsincartdisplayedinsidespanelement-->
Totalcost:<spanid="total">$0.00</span>