返回首页
当前位置: 主页 > 编程语言 > XML教程 >

DOM-XMLHttpRequest对象

时间:2020-07-10 12:05来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

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

序号 方法与说明
1个

abort()

终止当前发出的请求。

2

getAllResponseHeaders()

以字符串形式返回所有响应标头;如果未收到响应,则返回null。

3

getResponseHeader()

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

4

打开(方法,url,异步,uname,pswd)

它与Send方法结合使用,以将请求发送到服务器。open方法指定以下参数-

  • 方法 -指定请求的类型,即Get或Post。

  • url-它是文件的位置。

  • 异步 -指示应如何处理请求。它是布尔值。哪里,

    • “ true”表示不等待Http响应而异步处理请求。

    • “ false”表示在收到Http响应后,将同步处理请求。

  • uname-是用户名。

  • pswd-是密码。

5

发送(字符串)

它用于发送与Open方法结合使用的请求。

6

setRequestHeader()

标头包含将请求发送到的标签/值对。

属性

下表列出了XMLHttpRequest对象的属性-

序号 属性和说明
1个

就绪状态变更

这是一个基于事件的属性,该属性在每次状态更改时都处于启用状态。

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(此文件和node_ns.xml应该在服务器中的同一路径上)。我们将得到如下所示的输出-

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

检索资源文​​件的标头信息

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

<!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 
------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • DOM-DOMException对象

    在 抛出:DOMException 表示异常事件时使用的方法或属性发生。 物产 下表列出了DOMExc...

  • DOM-评论对象

    在本章中,我们将研究 Comment对象 。 注释被添加为注释或行,以理解XML代码的目的。 ...

  • DOM-CDATASection对象

    在本章中,我们将研究XML DOM CDATASection对象 。 XML文档中存在的文本将根据声明的...

  • DOM-ProcessingInstruction对象

    ProcessingInstruction 提供特定于应用程序的信息,该信息通常包含在XML文档的序言部...

  • DOM-DOMImplementation对象

    所述 的DOMImplementation 对象提供了许多用于执行独立于文档对象模型的任何特定实例...

  • DOM-NamedNodeMap对象

    所述 的NamedNodeMap 对象用于表示可由名称访问的节点的集合。 属性 下表列出了NamedN...

猜你感兴趣