DOM XMLHttpRequest对象

XMLHttpRequest对象在网页的客户端和服务器端之间建立介质,可以由许多脚本语言(如JavaScriptJScriptVBScript和其他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- 指定请求的类型,即GETPOST。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请求对象的状态作为数字给出。 例如,404200
6 statusText 将Http请求对象的状态作为字符串。 例如,Not FoundOK

3. 例子

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

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

   <Employee category = Non-Technical>
      <FirstName>Max</FirstName>
      <LastName>Lee</LastName>
      <ContactNo>089833990088</ContactNo>
      <Email>maxsu@jb51.cc</Email>
   </Employee>

   <Employee category = Management>
      <FirstName>Susen</FirstName>
      <LastName>Wong</LastName>
      <ContactNo>1010-234562350</ContactNo>
      <Email>Susen@jb51.cc</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>

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