<script type="text/javascript">
window.onload = function() {
var aNodes = document.getElementsByTagName("a");
for(var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
var request = new XMLHttpRequest();//创建一个XMLHttpRequest 对象,用于在后台与服务器交换数据。
var method = "GET";//传输方法设置为GET
var url = this.href;//获取链接
request.open(method, url);//使用OPEN方法与服务器建立连接
request.send(null);//向服务器端发送数据, 如果是POST方式就不能为空,需要设置请求头
request.onreadystatechange = function() {
//onreadystatechange 是一个事件句柄。它的值是一个函数的名称,
//当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。
//仅在状态为 4 时,我们才执行代码。
if(request.readyState == 4) {
//0 - (未初始化)还没有调用send()方法
//1 - (载入)已调用send()方法,正在发送请求
//2 - (载入完成)send()方法执行完成,
//3 - (交互)正在解析响应内容
//4 - (完成)响应内容解析完成,可以在客户端调用了
if(request.status == 200 || request.status == 304) {
//200||304,返回成功且无错误
document.getElementById("details").innerHTML = request.responseText;
//当来自服务器的响应并非 XML时,使用responseText
//responseText 属性返回字符串形式的响应即获取纯文本数据
}
}
}
return false;
}
}
}
</script>
应用AJAX的具体步骤:
1.建立xmlHttpRequest对象
var request = new XMLHttpRequest();
2.设置回调函数
request.onreadystatechange = function() {...}
3.使用OPEN方法与服务器建立连接
request.open(method, url);
4.向服务器端发送数据
request.send(null);
5.在回调函数中针对不同的响应状态进行处理
if(request.readyState == 4) {
//0 - (未初始化)还没有调用send()方法
//1 - (载入)已调用send()方法,正在发送请求
//2 - (载入完成)send()方法执行完成,
//3 - (交互)正在解析响应内容
//4 - (完成)响应内容解析完成,可以在客户端调用了
if(request.status == 200 || request.status == 304) {
//200||304,返回成功且无错误
......
}
}
总结:
优点:1.从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析
2.HTML的可读性好
3.HTML代码块与innerHTML属性搭配,效率高
缺点:
1.若需要通过Ajax更新一篇文档的多个部分,HTML不合适
2.innerHTML并非DOM标准