DOM - XMLHttpRequest 物件

XMLHttpRequest 物件在網頁的客戶端和伺服器端之間建立了一種媒介，許多指令碼語言（如 JavaScript、JScript、VBScript 和其他 Web 瀏覽器）都可以使用它來傳輸和操作 XML 資料。

使用 XMLHttpRequest 物件，可以更新網頁的一部分而無需重新載入整個頁面，在頁面載入後請求和接收來自伺服器的資料，以及向伺服器傳送資料。

語法

XMLHttpRequest 物件的例項化方法如下：

xmlhttp = new XMLHttpRequest();

為了相容所有瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件，如下所示：

if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
   xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

使用 XMLHttpRequest 物件載入 XML 檔案的示例，請參考此處

方法

下表列出了 XMLHttpRequest 物件的方法：

序號	方法及描述
1	abort() 終止當前請求。
2	getAllResponseHeaders() 返回所有響應頭作為字串，如果尚未收到響應則返回 null。
3	getResponseHeader() 返回包含指定標題文字的字串，如果尚未收到響應或響應中不存在該標題，則返回 null。
4	open(method,url,async,uname,pswd) 它與 Send 方法一起使用，將請求傳送到伺服器。open 方法指定以下引數： method − 指定請求型別，即 Get 或 Post。 url − 檔案位置。 async − 指示如何處理請求。這是一個布林值，其中： 'true' 表示非同步處理請求，無需等待 Http 響應。 'false' 表示在接收到 Http 響應後同步處理請求。 uname − 使用者名稱。 pswd − 密碼。
5	send(string) 它用於傳送與 Open 方法一起工作的請求。
6	setRequestHeader() Header 包含傳送請求的標籤/值對。

屬性

下表列出了 XMLHttpRequest 物件的屬性：

序號	屬性及描述
1	onreadystatechange 這是一個基於事件的屬性，在每次狀態更改時都會設定。
2	readyState 這描述了 XMLHttpRequest 物件的當前狀態。readyState 屬性有五種可能的狀態： readyState = 0 − 表示請求尚未初始化。 readyState = 1 − 請求已設定。 readyState = 2 − 請求已傳送。 readyState = 3 − 請求正在處理。 readyState = 4 − 請求已完成。
3	responseText 當伺服器的響應為文字檔案時，使用此屬性。
4	responseXML 當伺服器的響應為 XML 檔案時，使用此屬性。
5	status 將 Http 請求物件的狀態作為數字返回。例如，“404”或“200”。
6	statusText 將 Http 請求物件的狀態作為字串返回。例如，“未找到”或“確定”。

示例

node.xml 內容如下：

<?xml version = "1.0"?>
<Company>
   <Employee category = "Technical">
      <FirstName>Tanmay</FirstName>
      <LastName>Patil</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>tanmaypatil@xyz.com</Email>
   </Employee>
   
   <Employee category = "Non-Technical">
      <FirstName>Taniya</FirstName>
      <LastName>Mishra</LastName>
      <ContactNo>1234667898</ContactNo>
      <Email>taniyamishra@xyz.com</Email>
   </Employee>
   
   <Employee category = "Management">
      <FirstName>Tanisha</FirstName>
      <LastName>Sharma</LastName>
      <ContactNo>1234562350</ContactNo>
      <Email>tanishasharma@xyz.com</Email>
   </Employee>
</Company>

檢索資原始檔的特定資訊

以下示例演示如何使用 getResponseHeader() 方法和 readyState 屬性檢索資原始檔的特定資訊。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
         <script>
            function loadXMLDoc() {
               var xmlHttp = null;
               if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
                  xmlHttp = new XMLHttpRequest();
               }
               else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }

               return xmlHttp;
            }

            function makerequest(serverPage, myDiv) {
               var request =  loadXMLDoc();
               request.open("GET", serverPage);
               request.send(null);

               request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                     document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
                  }
               }
            }
      </script>
   </head>
   <body>
      <button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
      <div id = "ID">Specific header information is returned.</div>
   </body>
</html>

執行結果

將此檔案儲存為伺服器路徑上的 elementattribute_removeAttributeNS.htm（此檔案和 node_ns.xml 應位於伺服器上的同一路徑）。我們將得到如下所示的輸出：

Before removing the attributeNS: en
After removing the attributeNS: null

檢索資原始檔的標頭資訊

以下示例演示如何使用 getAllResponseHeaders() 方法和 readyState 屬性檢索資原始檔的標頭資訊。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <script>
         function loadXMLDoc() {
            var xmlHttp = null;

            if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
               xmlHttp = new XMLHttpRequest();
            } else if(window.ActiveXObject) //  for Internet Explorer 5 or 6 {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlHttp;
         }

         function makerequest(serverPage, myDiv) {
            var request =  loadXMLDoc();
            request.open("GET", serverPage);
            request.send(null);
            request.onreadystatechange = function() {
               if (request.readyState == 4) {
                  document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
               }
            }
         }
      </script>
   </head>
   <body>
      <button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
         Click me to load the AllResponseHeaders</button>
      <div id = "ID"></div>
   </body>
</html>

執行結果

將此檔案儲存為伺服器路徑上的 http_allheader.html（此檔案和 node.xml 應位於伺服器上的同一路徑）。我們將得到如下所示的輸出（取決於瀏覽器）：

Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified: 
      Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent 
      Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml

列印頁面