📄 面向 java 开发人员的 ajax 构建动态的 java 应用程序.htm
字号:
<TR>
<TD class=no-padding width=150>
<TABLE cellSpacing=0 cellPadding=0 width=143
border=0><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width=8>
<FORM name=email
action=https://www.ibm.com/developerworks/secure/email-it.jsp><INPUT
type=hidden
value="在 Web 应用程序开发中，页面重载周期是最大的一个使用障碍，对于 Java 开发人员来说也是一个严峻的挑战。在这个系列中，作者 Philip McCarthy 介绍了一种创建动态应用程序体验的开创性方式。Ajax（异步 JavaScript 和 XML）是一种编程技术，它允许为基于 Java 的 Web 应用程序把 Java 技术、XML 和 JavaScript 组合起来，从而打破页面重载的范式。"
name=body><INPUT type=hidden
value="面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序"
name=subject><INPUT type=hidden value=cn name=lang>
<SCRIPT language=JavaScript type=text/javascript><!--document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img src="//www.ibm.com/i/v14/icons/em.gif" height="16" width="16" vspace="3" alt="将此页作为电子邮件发送" /></td><td width="122"><p><a class="smallplainlink" href="javascript:document.email.submit();"><b>将此页作为电子邮件发送</b></a></p></td></tr>');//--></SCRIPT>
<NOSCRIPT>
<TBODY>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width=16></TD>
<TD class=small width=122>
<P><SPAN class=ast>未显示需要 JavaScript
的文档选项</SPAN></P></TD></TR></NOSCRIPT></FORM>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/fw_bold.gif"
width=16 vspace=3 border=0></TD>
<TD width=122>
<P><A class=smallplainlink
href="http://www.ibm.com/developerworks/community/"><B>讨论</B></A></P></TD></TR>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/dn.gif"
width=16 vspace=3 border=0></TD>
<TD width=122>
<P><A class=smallplainlink
href="http://www.ibm.com/developerworks/cn/java/j-ajax1/#download"><B>样例代码</B></A></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- 03/20/06 updated by gretchen --><BR>
<TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
<TBODY>
<TR>
<TD class=v14-header-2-small>拓展 Tomcat
应用</TD></TR></TBODY></TABLE>
<TABLE class=v14-gray-table-border cellSpacing=0 cellPadding=0
border=0>
<TBODY>
<TR>
<TD class=no-padding width=150>
<TABLE cellSpacing=0 cellPadding=0 width=143 border=0>
<TBODY>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width=8></TD>
<TD><IMG height=16 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/fw_bold.gif"
width=16 vspace=3 border=0></TD>
<TD width=125>
<P><A class=smallplainlink
href="http://www.ibm.com/developerworks/cn/kickstart/webserver.html?S_TACT=105AGX52&S_CMP=simpleart">下载
IBM 开源 J2EE 应用服务器 WAS CE 新版本 V1.1</A>
</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><BR></TD></TR></TBODY></TABLE>
<P>级别: 中级</P>
<P><A
href="http://www.ibm.com/developerworks/cn/java/j-ajax1/#author">Philip
McCarthy</A> (<A
href="mailto:philmccarthy@gmail.com?subject=构建动态的 Java 应用程序">mailto:philmccarthy@gmail.com?subject=构建动态的
Java 应用程序</A>), 软件开发顾问, 独立咨询顾问<BR></P>
<P>2005 年 10 月 20 日</P>
<BLOCKQUOTE>在 Web 应用程序开发中，页面重载循环是最大的一个使用障碍，对于 Java™
开发人员来说也是一个严峻的挑战。在这个系列中，作者 Philip McCarthy
介绍了一种创建动态应用程序体验的开创性方式。Ajax（异步 JavaScript 和 XML）是一种编程技术，它允许为基于 Java
的 Web 应用程序把 Java 技术、XML 和 JavaScript 组合起来，从而打破页面重载的范式。</BLOCKQUOTE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
<P>Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web
服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的
Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。</P>
<P>Ajax 不是一项技术，而更像是一个 <I>模式</I> —— 一种识别和描述有用的设计技术的方式。Ajax
是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实现 Ajax 应用程序的组件都已经存在若干年了。它目前受到重视是因为在 2004
和 2005 年出现了一些基于 Ajax 技术的非常棒的动态 Web UI，最著名的就是 Google 的 GMail 和 Maps
应用程序，以及照片共享站点 Flickr。这些用户界面具有足够的开创性，有些开发人员称之为“Web 2.0”，因此对 Ajax
应用程序的兴趣飞速上升。</P>
<P>在这个系列中，我将提供使用 Ajax 开发应用程序需要的全部工具 。在第一篇文章中，我将解释 Ajax 背后的概念，演示为基于
Java 的 Web 应用程序创建 Ajax 界面的基本步骤。我将使用代码示例演示让 Ajax 应用程序如此动态的服务器端 Java
代码和客户端 JavaScript。最后，我将指出 Ajax 方式的一些不足，以及在创建 Ajax
应用程序时应当考虑的一些更广的可用性和访问性问题。</P>
<P><A name=N1006E><SPAN class=atitle>更好的购物车</SPAN></A></P>
<P>可以用 Ajax 增强传统的 Web
应用程序，通过消除页面装入从而简化交互。为了演示这一点，我采用一个简单的购物车示例，在向里面添加项目时，它会动态更新。这项技术如果整合到在线商店，那么用户可以持续地浏览和向购物车中添加项目，而不必在每次点击之后都等候完整的页面更新。虽然这篇文章中的有些代码特定于购物车示例，但是演示的技术可以应用于任何
Ajax 应用程序。清单 1 显示了购物车示例使用的有关 HTML 代码，整篇文章中都会使用这个 HTML。</P><BR><BR><A
name="Listing 1"><B>清单1. 购物车示例的有关片断</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode><!-- 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>
</PRE></TD></TR></TBODY></TABLE><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/java/j-ajax1/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N10081><SPAN class=atitle>Ajax 往返过程</SPAN></A></P>
<P>Ajax 交互开始于叫作 <CODE>XMLHttpRequest</CODE> 的 JavaScript
对象。顾名思义，它允许客户端脚本执行 HTTP 请求，并解析 XML 服务器响应。Ajax 往返过程的第一步是创建
<CODE>XMLHttpRequest</CODE> 的实例。在 <CODE>XMLHttpRequest</CODE>
对象上设置请求使用的 HTTP 方法（<CODE>GET</CODE> 或 <CODE>POST</CODE>）以及目标
URL。</P>
<P>现在，您还记得 Ajax 的第一个 <I>a</I> 是代表 <I>异步（asynchronous）</I> 吗？在发送 HTTP
请求时，不想让浏览器挂着等候服务器响应。相反，您想让浏览器继续对用户与页面的交互进行响应，并在服务器响应到达时再进行处理。为了实现这个要求，可以在
<CODE>XMLHttpRequest</CODE> 上注册一个回调函数，然后异步地分派
<CODE>XMLHttpRequest</CODE>。然后控制就会返回浏览器，当服务器响应到达时，会调用回调函数。</P>
<P>在 Java Web 服务器上，请求同其他 <CODE>HttpServletRequest</CODE>
一样到达。在解析了请求参数之后，servlet 调用必要的应用程序逻辑，把响应序列化成 XML，并把 XML 写入
<CODE>HttpServletResponse</CODE>。</P>
<P>回到客户端时，现在调用注册在 <CODE>XMLHttpRequest</CODE> 上的回调函数，处理服务器返回的 XML
文档。最后，根据服务器返回的数据，用 JavaScript 操纵页面的 HTML DOM，把用户界面更新。图 1 是 Ajax
往返过程的顺序图。</P><BR><BR><A name=figure1><B>图 1. Ajax
往返过程</B></A><BR><IMG height=630 alt=" Ajax 往返过程的顺序图"
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/ajax.gif" width=566>
<BR>
<P>现在您对 Ajax 往返过程有了一个高层面的认识。下面我将放大其中的每一步骤，进行更详细的观察。如果过程中迷了路，请回头看图 1
—— 由于 Ajax 方式的异步性质，所以顺序并非十分简单。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/java/j-ajax1/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N100D5><SPAN class=atitle>分派
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -