AJAX - XMLHttpRequest 对象
AJAX - XMLHttpRequest 对象
Ajax 的核心是 XMLHttpRequest 对象。
XMLHttpRequest 对象
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
创建 XMLHttpRequest 对象
所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是：
variable = new XMLHttpRequest();
老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：
variable = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：
示例代码：
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo">让 AJAX 改变这段文本。</p>
<button type="button" onclick="loadDoc()">更改内容</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/demo/ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
跨域访问
出于安全原因，现代浏览器不允许跨域访问。
这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
W3School 上的实例都会打开位于 W3School 域上的 XML 文件。
如果您希望在自己的页面上使用以上实例，那么您所加载的 XML 文件必须位于您自己的服务器上。
老版本的 Internet Explorer（IE5 和 IE6）
老版本的 Internet Explorer（IE5 和 IE6）不支持 XMLHttpRequest 对象。
为了对付 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象，亦或创建 ActiveXObject 对象：
示例代码：
if (window.XMLHttpRequest) {
// 用于现代浏览器的代码
xmlhttp = new XMLHttpRequest();
} else {
// 应对老版本 IE 浏览器的代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo">让 AJAX 改变这段文本。</p>
<button type="button" onclick="loadDoc()">更改内容</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// 针对现代浏览器的代码
xhttp = new XMLHttpRequest();
} else {
// 针对 IE6、IE5 的代码
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/demo/ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
XMLHttpRequest 对象方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) |
规定请求
|
| send() | 将请求发送到服务器，用于 GET 请求 |
| send(string) | 将请求发送到服务器，用于 POST 请求 |
| setRequestHeader() | 向要发送的报头添加标签/值对 |
XMLHttpRequest 对象属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
| readyState |
保存 XMLHttpRequest 的状态。
|
| responseText | 以字符串返回响应数据 |
| responseXML | 以 XML 数据返回响应数据 |
| status |
返回请求的状态号 如需完整列表请访问 Http 消息参考手册
|
| statusText | 返回状态文本（比如 "OK" 或 "Not Found"） |
