HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

DOM - XMLHttpRequest 对象

XMLHttpRequest 对象在网页的客户端和服务器端之间建立了一个媒介，许多脚本语言(如 JavaScript、JScript、VBScript 和其他网页浏览器)都可以使用它来传输和操作 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 对象的方法 −

S.No. 方法与说明
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 对象的属性 −

S.No. 属性和说明
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() 和属性 readState 检索资源文​​件的特定信息。

<!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
❮ 上一节 下一节 ❯