XMLHttpRequest對象是AJAX（非同步JavaScript+XML）開發範例的焦點所在，但它並非最近才出現。微軟最先在 Windows IE5中將XMLHttpRequest對象應用為ActiveX對象。Mozilla也在它的Mozilla 1.0(與Netscape 7)中應用了它的一個本地相容版本。蘋果也在它的Safari 1.2 中應用此對象。加入W3C DOM規格更使其成為網路開發的標準。
XMLHttpRequest對象允許JavaScript不需重新裝載頁面即可發送HTTP請求。實質上，HTTP請求是通過後台收到的響應來發送的，但是，由於沒有可見的中斷產生，使用者完全意識不到背景處理過程，而會繼續工作。對開發人員來說，這真是意外的收穫，導致了能夠即時向伺服器發送資料的響應使用者介面。
方法
XMLHttpRequest對象包含少量的方法，如下所示：
* abort()：終止當前請求。
* getAllResponseHeaders()：返回一個包含整套頭標籤與值的字串。
* getResponseHeader(“名稱”)：返回特定頭標籤的字串值。
* open(“方法”，“url”，“非同步標誌”，“使用者名稱”，“密碼”)：替即將發生的請求執行安裝功能，並允許你指定URL、方法（通常獲得或提交）以及非同步標誌的選擇性參數，使用者名稱與密碼。
* sent(內容)：發送（由open方法建立）的請求。可選內容參數可能包含字串或DOM格式資料。
* setRequestHeader(“標籤”，“值”)：允許你指定與請求（由send方法建立）一同發送的標籤/值對。
open方法的第三個選擇性參數是一個布爾代數值，它對你是否非同步處理即將發生的交易進行控制；這也是AJAX首字母縮寫非同步部分進入圖片的地方。非同步處理為邊預設行為（真），就是說在調用send()方法後，不用等待響應就立即執行指令碼處理。如果將此值設為假，此指令碼等待發出請求，伺服器做出反映後再執行。
屬性
網路或伺服器可能會引起問題，使指令碼無法執行，因此在繼續處理之前等待響應並非總是明智之舉。更穩妥的做法是：在請求對象的onreadystatechange事件發生時，非同步發送並設計代碼，如下面的XMLHttpRequest對象屬性工作表所示：
* onreadystatechange：每個狀態發生改變所引發的事件的事件處理器。
* readyState：對象的狀態（0=未初始化，1=正在裝載，2=裝載完畢，3=互動，4=完成）。
* responseText：伺服器返回資料的字串表示。
* responseXML：伺服器返回資料的DOM表示。
* status：伺服器請求HTTP狀態碼的數字代碼。
* statusText：伴隨數字狀態碼的字串資訊。
你可以在使用者繼續使用應用軟體的同時，利用XMLHttpRequest對象的方法與屬性，在後台發送請求。
瞭解應用中的對象
有兩種在JavaScript代碼中應用XMLHttpRequest對象的方法。以下是IE方法：
varreq = new ActiveXObject("Microsoft.XMLHTTP");
以下為非IE方法：
varreq = new XMLHttpRequest();
由於這個原因，根據你所使用的瀏覽器，你可能想包括建立對象執行個體的代碼，如下面的代碼所示：
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
這樣就建立了一個基於瀏覽器的XMLHttpRequest類。
在列表A中，網頁應用ASP.NET，對輸入到文字框中的公司名執行電話號碼查詢（我使用的是標準的SQL Server Northwind資料庫）。文本域的JavaScript onblur事件觸發查詢。
列表A<html><head>
<title>TechRepublic.com Example</title>
<script type="text/javascript" language="JavaScript">
function getTelephone(cName) {
document.body.style.cursor='wait';
varobj = null;
if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
vargoUrl = "http://localhost/test3.aspx?cname=" + cName
obj.open("POST",goUrl, false );
obj.send();
if ((obj.responseText == "Error") || (obj.responseText == ""))
alert("The company name is invalid.");
else
this.document.forms[0].telephone.value = obj.responseText;
document.body.style.cursor='auto';
}
</script></head><body>
<form id="frmText">
<input type="text" name="telephone" /><br />
<input type="text" name="cname" onblur="getTelephone(this.value);" />
</form>
</body></html>
對HTML頁面的幾點提示：
* getTelephone JavaScript方法與XMLHttpRequest對象共同工作。它（根據瀏覽器）建立對象，並將（從文本域）提交到它的值貼粘到ASP.NET頁面。
* XMLHttpRequest對象的傳回值（responseText屬性）用於決定不返回資料，或是返回錯誤。
* 文本域的onblur事件與JavaScript函數聯絡在一起，當使用者在域外點擊時，即被調用。
在列表B中，XMLHttpRequest對象調用ASP.NET代碼。ASP.NET頁面很簡單。它應用通過QueryString變數提交到頁面的值來定位SQL伺服器資料庫中匹配的資料，並返回匹配資料，如果發生異常，則返回錯誤。
列表B
<%@ Page Language="C#" ContentType="text/plain" Debug="true" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data" %>
<script language="C#" runat="server">
private SqlConnection conn = null;
private SqlCommand cmd = null;
private String connString;
private String strSQL;
private void Page_Load(object sender, System.EventArgs e) {
if (!IsPostBack) {
connString = "data source=SALESLAPTOP;uid=test;pwd=test;initial catalog=Northwind";
strSQL = "SELECT Phone FROM dbo.Customers WHERE CompanyName LIKE '%" + Request.QueryString["cname"] + "%'";
try {
conn = new SqlConnection(connString);
cmd = new SqlCommand(strSQL, conn);
conn.Open();
Response.Write(cmd.ExecuteScalar().ToString());
conn.Close();
}catch (Exception ex) {Response.Write("Error");
} finally {
if (conn.State == ConnectionState.Open) {
conn.Close();
}conn.Dispose();
} } }
</script>
本例應用一個終端ASP.NET頁面，但它可以使用任何開發語言。另外，由於終端頁面只是簡單地應用傳回值，終端頁面不必與調用它的頁面使用同樣的開發語言或平台。終端頁面也可能是一個網路服務。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
