根据上一小节已经知道XMLHttpRequest是Ajax实现的基础，所有现代浏览器都支持并内建了XMLHttpRequest对象。我们下面就来看一下该对象的使用。
1、创建XMLHttpRequest对象
要实现异步操作首先就需要创建一个XMLHttpRequest对象，创建语法如下：
var XHR = new XMLHttpRequest();有了XMLHttpRequest对象，我们就可以通过它来实现发送服务器请求了。
2、向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法，相应语法规则如下：
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) | 将请求发送到服务器。
|
下面是对百度请求的一个简单示例：
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();3、服务器响应
有了请求必然有响应，如需获得来自服务器的响应，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
具体使用哪一个根据服务器响应结果来确定，如果来自服务器的响应并非 XML，请使用 responseText 属性，否则使用responseXML 属性。
根据以上内容可以知道，我们已经可以通过XMLHttpRequest对象来发送服务器请求和接收来自服务器的响应数据了。但是只有这些还不足以实现异步操作，下面谈到的onreadystatechange 事件是关键。
4、readystate状态
readyState是XMLHttpRequest对象的一个属性，该属性存有 XMLHttpRequest 的状态信息, 其值会随着响应而发生变换，每当 readyState 改变时，就会触发 onreadystatechange 事件。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪，下面给出完整示例：
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
