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 方法指定了以下参数 −
|
| 5 | send(string) 它用于与 Open 方法结合使用来发送请求。 |
| 6 | setRequestHeader() Header 包含请求发送到的标签/值对。 |
属性
下表列出了 XMLHttpRequest 对象的属性 −
| S.No. | 属性和说明 |
|---|---|
| 1 | onreadystatechange 这是一个基于事件的属性，每次状态改变时都会设置。 |
| 2 | readyState 这描述了 XMLHttpRequest 对象的当前状态。readyState 属性有五种可能的状态 −
|
| 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
