📄 掌握 ajax，第 2 部分 使用 javascript 和 ajax 发出异步请求.htm
字号:
border=0>
<TBODY>
<TR>
<TD class=no-padding width=150>
<TABLE cellSpacing=0 cellPadding=0 width=143
border=0><IMG height=1 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/c.gif"
width=8>
<FORM name=email
action=https://www.ibm.com/developerworks/secure/email-it.jsp><INPUT
type=hidden
value="多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送请求，并响应服务器。"
name=body><INPUT type=hidden
value="掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求"
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="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.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="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.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></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="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/c.gif"
width=8></TD>
<TD><IMG height=16 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.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/xml/wa-ajaxintro2/#author">Brett
McLaughlin</A> (<A
href="mailto:brett@newInstance.com?subject=使用 JavaScript 和 Ajax 发出异步请求&cc=htc@us.ibm.com">mailto:brett@newInstance.com?subject=使用
JavaScript 和 Ajax 发出异步请求&cc=htc@us.ibm.com</A>), 作家，编辑, O'Reilly
Media Inc.<BR></P>
<P>2006 年 2 月 16 日</P>
<BLOCKQUOTE>多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML
页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和
XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin
介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送请求，并响应服务器。</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>本系列的上一期文章（请参阅 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#resources">参考资料</A>
中的链接），我们介绍了 Ajax 应用程序，考察了推动 Ajax
应用程序的基本概念。其中的核心是很多您可能已经了解的技术：JavaScript、HTML 和 XHTML、一点动态 HTML 以及
DOM（文档对象模型）。本文将放大其中的一点，把目光放到具体的 Ajax 细节上。</P>
<P>本文中，您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法：<CODE>XMLHttpRequest</CODE>
对象。该对象实际上仅仅是一个跨越所有 Ajax
应用程序的公共线程，您可能已经预料到，只有彻底理解该对象才能充分发挥编程的潜力。事实上，有时您会发现，要正确地使用
<CODE>XMLHttpRequest</CODE>，显然<I>不能</I> 使用
<CODE>XMLHttpRequest</CODE>。这到底是怎么回事呢？</P>
<P><A name=N10084><SPAN class=atitle>Web 2.0 一瞥</SPAN></A></P>
<P>在深入研究代码之前首先看看最近的观点 —— 一定要十分清楚 Web 2.0 这个概念。听到 Web 2.0
这个词的时候，应该首先问一问 “Web 1.0 是什么？” 虽然很少听人提到 Web
1.0，实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如，到 Amazon.com
网站上点击一个按钮或者输入搜索项。就会对服务器发送一个请求，然后响应再返回到浏览器。该请求不仅仅是图书和书目列表，而是另一个完整的
HTML 页面。因此当 Web 浏览器用新的 HTML
页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。</P>
<P>Web 2.0（在很大程度上）消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr
这样的站点（到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#resources">参考资料</A>）。比如在
Google Maps
上，您可以拖动地图，放大和缩小，只有很少的重绘操作。当然这里仍然有请求和响应，只不过都<I>藏到了幕后</I>。作为用户，体验更加舒适，感觉很像桌面应用程序。这种新的感受和范型就是当有人提到
Web 2.0 时您所体会到的。</P>
<P>需要关心的是如何使这些新的交互成为可能。显然，仍然需要发出请求和接收响应，但正是针对每次请求/响应交互的 HTML
重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚，我们需要一种方法使发送的请求和接收的响应<I>只</I>
包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户<I>看到</I> 新页面的时候。</P>
<P>但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下，Ajax 和 Web 2.0
方法允许在<I>不</I> 更新整个 HTML
页面的情况下发送和接收数据。对于那些经常上网的人，这种能力可以让您的应用程序感觉更快、响应更及时，让他们不时地光顾您的网站。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.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="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.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/xml/wa-ajaxintro2/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N100A6><SPAN class=atitle>XMLHttpRequest
简介</SPAN></A></P>
<P>要真正实现这种绚丽的奇迹，必须非常熟悉一个 JavaScript 对象，即
<CODE>XMLHttpRequest</CODE>。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是本专栏今后几个月中要介绍的
Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它，下面给出将要用于该对象的<I>很少的几个</I>
方法和属性。</P>
<UL>
<LI><CODE>open()</CODE>：建立到服务器的新请求。
<LI><CODE>send()</CODE>：向服务器发送请求。
<LI><CODE>abort()</CODE>：退出当前请求。
<LI><CODE>readyState</CODE>：提供当前 HTML 的就绪状态。
<LI><CODE>responseText</CODE>：服务器返回的请求响应文本。 </LI></UL>
<P>如果不了解这些（或者其中的<I>任何</I> 一个），您也不用担心，后面几篇文章中我们将介绍每个方法和属性。现在<I>应该</I>
了解的是，明确用 <CODE>XMLHttpRequest</CODE>
做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上，如果看到 <CODE>XMLHttpRequest</CODE>
的所有方法和属性，就会发现它们<I>都</I> 与非常简单的请求/响应模型有关。显然，我们不会遇到特别新的 GUI
对象或者创建用户交互的某种超极神秘的方法，我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力，但是用好该对象可以彻底改变您的应用程序。</P>
<P><A name=N100EB><SPAN class=smalltitle>简单的 new</SPAN></A></P>
<P>首先需要创建一个新变量并赋给它一个 <CODE>XMLHttpRequest</CODE> 对象实例。这在 JavaScript
中很简单，只要对该对象名使用 <CODE>new</CODE> 关键字即可，如 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code1">清单
1</A> 所示。</P><BR><BR><A name=code1><B>清单 1. 创建新的 XMLHttpRequest
对象</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>不难吧？记住，JavaScript 不要求指定变量类型，因此不需要像 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code2">清单
2</A> 那样做（在 Java 语言中可能需要这样）。</P><BR><BR><A name=code2><B>清单 2. 创建
XMLHttpRequest 的 Java 伪代码</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
XMLHttpRequest request = new XMLHttpRequest();
</PRE></TD></TR></TBODY></TABLE><BR>
<P>因此在 JavaScript 中用 <CODE>var</CODE> 创建一个变量，给它一个名字（如
“request”），然后赋给它一个新的 <CODE>XMLHttpRequest</CODE>
实例。此后就可以在函数中使用该对象了。</P>
<P><A name=N10125><SPAN class=smalltitle>错误处理</SPAN></A></P>
<P>在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器（不论您是否相信，仍然有人在使用老版本的
Netscape Navigator）都不支持
<CODE>XMLHttpRequest</CODE>，您需要让这些用户知道有些地方出了问题。<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code3">清单
3</A> 说明如何创建该对象，以便在出现问题的时候发出 JavaScript 警告。</P><BR><BR><A
name=code3><B>清单 3. 创建具有错误处理能力的 XMLHttpRequest</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<script language="javascript" type="text/javascript">
<SPAN class=boldcode>var request = false;
try {</SPAN>
request = new XMLHttpRequest();
<SPAN class=boldcode>} catch (failed) {
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -