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

打印页面