?? 掌握 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 + -