📄 掌握 ajax，第 3 部分 ajax 中的高级请求和响应.htm
字号:
<TR>
<TD class=v14-header-1-small>文档选项</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><IMG height=1 alt=""
src="掌握 Ajax，第 3 部分 Ajax 中的高级请求和响应.files/c.gif"
width=8>
<FORM name=email
action=https://www.ibm.com/developerworks/secure/email-it.jsp><INPUT
type=hidden
value="对于很多 Web 开发人员来说，只需要生成简单的请求并接收简单的响应即可；但是对于希望掌握 Ajax 的开发人员来说，必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中，Brett McLaughlin 将向您介绍各种状态代码，并展示浏览器如何对其进行处理，本文还给出了在 Ajax 中使用的比较少见的 HTTP 请求。"
name=body><INPUT type=hidden
value="掌握 Ajax，第 3 部分: 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，第 3 部分 Ajax 中的高级请求和响应.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 3 部分 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，第 3 部分 Ajax 中的高级请求和响应.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 3 部分 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>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="掌握 Ajax，第 3 部分 Ajax 中的高级请求和响应.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 3 部分 Ajax 中的高级请求和响应.files/dn.gif"
width=16 vspace=3 border=0></TD>
<TD width=122>
<P><A class=smallplainlink
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/#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="掌握 Ajax，第 3 部分 Ajax 中的高级请求和响应.files/c.gif"
width=8></TD>
<TD><IMG height=16 alt=""
src="掌握 Ajax，第 3 部分 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-ajaxintro3/#author">Brett
McLaughlin</A> (<A
href="mailto:brett@newInstance.com?subject=Ajax 中的高级请求和响应&cc=htc@us.ibm.com">mailto:brett@newInstance.com?subject=Ajax
中的高级请求和响应&cc=htc@us.ibm.com</A>), 作家，编辑, O'Reilly Media
Inc.<BR></P>
<P>2006 年 3 月 23 日</P>
<BLOCKQUOTE>对于很多 Web 开发人员来说，只需要生成简单的请求并接收简单的响应即可；但是对于希望掌握 Ajax
的开发人员来说，必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中，Brett
McLaughlin 将向您介绍各种状态代码，并展示浏览器如何对其进行处理，本文还给出了在 Ajax 中使用的比较少见的 HTTP
请求。</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/">上篇文章</A>
中，我们将详细介绍 <CODE>XMLHttpRequest</CODE> 对象，它是 Ajax
应用程序的中心，负责处理服务器端应用程序和脚本的请求，并处理从服务器端组件返回的数据。由于所有的 Ajax 应用程序都要使用
<CODE>XMLHttpRequest</CODE> 对象，因此您可能会希望熟悉这个对象，从而能够让 Ajax 执行得更好。</P>
<P>在本文中，我将在上一篇文章的基础上重点介绍这个请求对象的 3 个关键部分的内容：</P>
<UL>
<LI>HTTP 就绪状态
<LI>HTTP 状态代码
<LI>可以生成的请求类型 </LI></UL>
<P>这三部分内容都是在构造一个请求时所要考虑的因素；但是介绍这些主题的内容太少了。然而，如果您不仅仅是想了解 Ajax
编程的常识，而是希望了解更多内容，就需要熟悉就绪状态、状态代码和请求本身的内容。当应用程序出现问题时 —— 这种问题总是存在 ——
那么如果能够正确理解就绪状态、如何生成一个 HEAD 请求或者 400 的状态代码的确切含义，就可以在 5
分钟内调试出问题，而不是在各种挫折和困惑中度过 5 个小时。</P>
<TABLE cellSpacing=0 cellPadding=0 width="50%" align=right
border=0><TBODY>
<TR>
<TD width=10><IMG height=1 alt=""
src="掌握 Ajax，第 3 部分 Ajax 中的高级请求和响应.files/c.gif" width=10></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
<TBODY>
<TR>
<TD bgColor=#eeeeee><A name=N1009F><B>XMLHttpRequest 或
XMLHttp：换名玫瑰</B></A><BR>
<P>Microsoft™ 和 Internet Explorer 使用了一个名为
<CODE>XMLHttp</CODE> 的对象，而不是 <CODE>XMLHttpRequest</CODE>
对象，而 Mozilla、Opera、Safari 和 大部分非 Microsoft
浏览器都使用的是后者。为了简单性起见，我将这两个对象都简单地称为
<CODE>XMLHttpRequest</CODE>。这既符合我们在 Web 上看到的情况，又符合
Microsoft 在 Internet Explorer 7.0 中使用
<CODE>XMLHttpRequest</CODE> 作为请求对象的意图。（有关这个问题的更多内容，请参见
<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/">第
2 部分</A>。）</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P>下面让我们首先来看一下 HTTP 就绪状态。</P>
<P><A name=N100C1><SPAN class=atitle>深入了解 HTTP 就绪状态</SPAN></A></P>
<P>您应该还记得在上一篇文章中 <CODE>XMLHttpRequest</CODE> 对象有一个名为
<CODE>readyState</CODE>
的属性。这个属性确保服务器已经完成了一个请求，通常会使用一个回调函数从服务器中读出数据来更新 Web 表单或页面的内容。<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/#listing1">清单
1</A> 给出了一个简单的例子（这也是本系列的上一篇文章中的一个例子 —— 请参见 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/#resources">参考资料</A>）。</P><BR><BR><A
name=listing1><B>清单 1. 在回调函数中处理服务器的响应</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="50%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
function updatePage() {
<SPAN class=boldcode>if (request.readyState == 4) {</SPAN>
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML =
response[1].replace(/\n/g, "<br />");
} else
alert("status is " + request.status);
}
}
</PRE></TD></TR></TBODY></TABLE><BR>
<P>这显然是就绪状态最常见（也是最简单）的用法。正如您从数字 "4"
中可以看出的一样，还有其他几个就绪状态（您在上一篇文章中也看到过这个清单 —— 请参见 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/#resources">参考资料</A>）：</P>
<UL>
<LI><B>0</B>：请求未初始化（还没有调用 <CODE>open()</CODE>）。
<LI><B>1</B>：请求已经建立，但是还没有发送（还没有调用 <CODE>send()</CODE>）。
<LI><B>2</B>：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
<LI><B>3</B>：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
<LI><B>4</B>：响应已完成；您可以获取并使用服务器的响应了。 </LI></UL>
<P>如果您希望不仅仅是了解 Ajax
编程的基本知识，那么就不但需要知道这些状态，了解这些状态是何时出现的，以及如何来使用这些状态。首先，您需要学习在每种就绪状态下可能碰到的是哪种请求状态。不幸的是，这一点并不直观，而且会涉及几种特殊的情况。</P>
<P><A name=N10117><SPAN class=smalltitle>隐秘就绪状态</SPAN></A></P>
<P>第一种就绪状态的特点是 <CODE>readyState</CODE> 属性为 0（<CODE>readyState ==
0</CODE>），表示未初始化状态。一旦对请求对象调用 <CODE>open()</CODE> 之后，这个属性就被设置为
1。由于您通常都是在一对请求进行初始化之后就立即调用 <CODE>open()</CODE>，因此很少会看到
<CODE>readyState == 0</CODE> 的状态。另外，未初始化的就绪状态在实际的应用程序中是没有真正的用处的。</P>
<P>不过为了满足我们的兴趣，请参见 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/#listing2">清单
2</A> 的内容，其中显示了如何在 readyState 被设置为 0 时来获取这种就绪状态。</P><BR><BR><A
name=listing2><B>清单 2. 获取 0 就绪状态</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -