DOM XMLHttpRequest对象

精华

小牛编辑

109浏览

2023-03-14

XMLHttpRequest对象在网页的客户端和服务器端之间建立介质，可以由许多脚本语言(如JavaScript，JScript，VBScript和其他Web浏览器)使用，以传输和操作XML数据。

使用XMLHttpRequest对象，可以更新网页的一部分而无需重新加载整个页面，在页面加载后从服务器请求和接收数据并将数据发送到服务器。

1. 语法

XMLHttpRequest对象可以实例化如下 -

var 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文件的示例

2. 方法

下表列出了XMLHttpRequest对象的方法 -

序号	方法	描述
1	`abort()`	终止当前的请求。
2	`getAllResponseHeaders()`	以字符串形式返回所有响应标头，如果未收到响应，则返回`null`。
3	`getResponseHeader()`	返回包含指定标头文本的字符串;如果尚未收到响应或响应中不存在标头，则返回`null`。
4	`open(method,url,async,uname,pswd)`	它与Send方法共用，用于将请求发送到服务器。参数：1.`method`- 指定请求的类型，即`GET`或`POST`。2.`url`- 文件的位置。3.`async`-表示应如何处理请求，它是布尔值。4.`uname` - 用户名。5.`pswd`- 密码
5	`send(string)`	它用于发送与Open方法结合的请求。
6	`setRequestHeader()`	标头包含发送请求的标签/值对。

3. 属性

下表列出了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请求对象的状态作为字符串。例如，`"Not Found"`或`"OK"`。

3. 例子

文件：node.xml 的内容如下 -

<?xml version = "1.0"?>
<Company>
   <Employee category = "Technical">
      <FirstName>Tianya</FirstName>
      <LastName>Su</LastName>
      <ContactNo>0898-12345678</ContactNo>
      <Email>tianya@yiibai.com</Email>
   </Employee>

   <Employee category = "Non-Technical">
      <FirstName>Max</FirstName>
      <LastName>Lee</LastName>
      <ContactNo>089833990088</ContactNo>
      <Email>maxsu@yiibai.com</Email>
   </Employee>

   <Employee category = "Management">
      <FirstName>Susen</FirstName>
      <LastName>Wong</LastName>
      <ContactNo>1010-234562350</ContactNo>
      <Email>Susen@yiibai.com</Email>
   </Employee>
</Company>

检索资源文件的特定信息

下面的示例演示如何使用方法getResponseHeader()和属性readState来检索资源文件的特定信息。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "content-type" content = "text/html;charset=utf-8" />
         <script>
            function getXMLHttp() {
               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 =  getXMLHttp();
               request.open("GET", serverPage);
               request.send(null);

               request.onreadystatechange = function() {
                  var msg = '';
                  if (request.readyState == 4) {
                     msg = 'Content-length = '+request.getResponseHeader("Content-length");
                     msg = msg +'<br/> Date = '+ request.getResponseHeader("Date");
                     document.getElementById(myDiv).innerHTML = msg;
                  }
               }
            }
      </script>
   </head>
   <body>
      <button type = "button" onclick="makerequest('/node.xml', 'ID')">单击以获取指定的：ResponseHeader</button>
      <div id = "ID">返回指定标头信息</div>
   </body>
</html>

执行上面示例代码，得到以下结果 -

检索资源文件的标头信息

下面的示例演示如何使用readyState属性和getAllResponseHeaders()方法检索资源文件的头信息。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <script>
         function GetXMLHttp() {
            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 =  GetXMLHttp();
            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('/node.xml', 'ID')">
         单击以加载AllResponseHeaders信息</button>
      <div id = "ID"></div>
   </body>
</html>

执行上面示例代码，得到以下结果 -