XMLHttpRequest对象在网页的客户端和服务器端之间建立介质，可以由许多脚本语言(如JavaScript，JScript，VBScript和其他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- 指定请求的类型，即GET或POST。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请求对象的状态作为数字给出。 例如，404或200。 |
| 6 | statusText |
将Http请求对象的状态作为字符串。 例如，"Not Found"或"OK"。 |
3. 例子
文件：node.xml 的内容如下 -
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tianya</FirstName>
<LastName>Su</LastName>
<ContactNo>0898-12345678</ContactNo>
<Email>tianya@xuhuhu.com</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Max</FirstName>
<LastName>Lee</LastName>
<ContactNo>089833990088</ContactNo>
<Email>maxsu@xuhuhu.com</Email>
</Employee>
<Employee category = "Management">
<FirstName>Susen</FirstName>
<LastName>Wong</LastName>
<ContactNo>1010-234562350</ContactNo>
<Email>Susen@xuhuhu.com</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>
执行上面示例代码，得到以下结果 -
上一篇：
DOM Comment对象
下一篇：
DOM DOMException对象