XML HttpRequest

一、XML HttpRequest

XMLHttpRequest对象用于在后台与服务器交换数据。作用：

在不重新加载页面的情况下更新网页

在页面已经加载后向服务器请求数据

在页面已经加载后从服务器接收数据

在后台向服务器发送数据

新版的ie，建立一个XMLHttpRequest对象：

xmlHttp=new XMLHttpRequest();

老版的ie，建立一个XMLHttpRequest对象：

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest对象的属性：

readyState

HTTP 请求的状态.当一个XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

扫描二维码关注公众号，回复： 2552471 查看本文章

状态名称描述

0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被abort() 方法重置。

1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。

2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。

3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。

4 Loaded HTTP 响应已经完全接收。

每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

responseText

目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

responseXML

对请求的响应，解析为 XML 并作为 Document 对象返回。

status

由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

statusText

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

onreadystatechange

每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。

XMLHttpRequest对象的方法：

abort()，取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getAllResponseHeaders()，把 HTTP 响应头部作为未解析的字符串返回。

如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。

getResponseHeader()，返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

open()

初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

send()

发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

setRequestHeader()

向一个打开但未发送的请求设置或添加一个 HTTP 请求。

XMLHttpRequest. open(method, url, async,username, password)；

1.method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。

2.url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

3.async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。

4.username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

注意：open()保存供 send() 方法使用的请求参数，以及重置 XMLHttpRequest 对象以便复用，open() 方法没有其他的行为。

XMLHttpRequest. send(body);

如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不适必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。

通过请求从服务器上载入某个目录下txt文件中中信息：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url){//
xmlhttp=null;
if (window.XMLHttpRequest)
  {// 新版浏览器
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {//老版的ie
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null){
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else{
  alert("Your browser does not support XMLHTTP.");
  }
}
function state_Change(){
if (xmlhttp.readyState==4){
  if (xmlhttp.status==200){
    document.getElementById('T1').innerHTML=xmlhttp.responseText;
    }
  else{
    alert("错误信息:" + xmlhttp.statusText);
    }
  }
}
</script>
</head>
<body onload="loadXMLDoc('/example/xdom/test_xmlhttp.txt')">
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('/example/xdom/test_xmlhttp2.txt')">Click</button>
</body>
</html>

获取xml的信息：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Mozilla, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5, IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=onResponse;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
  {
  alert("Problem retrieving XML data");
  return;
  }
txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  {
  txt=txt + "<tr>";
  xx=x[i].getElementsByTagName("TITLE");
    {
    try
      {
      txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
      }
    catch (er)
      {
      txt=txt + "<td> </td>";
      }
    }
  xx=x[i].getElementsByTagName("ARTIST");
    {
    try
      {
      txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
      }
    catch (er)
      {
      txt=txt + "<td> </td>";
      }
    }
  txt=txt + "</tr>";
  }
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;
}
</script>
</head>
<body>
<div id="copy">
<button onclick="loadXMLDoc('/example/xdom/cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>

一、XML HttpRequest

猜你喜欢