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对象的方法 :

S.No.方法&描述
1

abort()

终止当前的请求.

2

getAllResponseHeaders()

以字符串形式返回所有响应头,如果没有收到响应,则返回null.

3

getResponseHeader()

返回包含指定标题文本的字符串,如果尚未收到响应或响应中不存在标题,则返回null.

4

open(method,url,async,uname,pswd)

它与Send方法共用,用于将请求发送到服务器. open方法指定以下参数 :

  • 方法 : 指定请求的类型,即获取或发布.

  • url : 它是文件的位置.

  • async : 表示应如何处理请求.它是布尔值.其中,

    • 'true'表示请求是异步处理的,无需等待Http响应.

    • 'false'.表示请求在收到Http响应后同步处理.

  • uname : 是用户名.

  • pswd : 是密码.

5

发送(字符串)

它用于发送与Open方法共轭的请求.

6

setRequestHeader()

标题包含标签/值对请求发送.

属性

下表列出了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

状态

将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 file和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 (此file和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