AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
通过一个简单的例子了解Ajax
在index.html页面中获取test.html页面的内容。
test.html页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
test.html页面的内容
<!-- 作为测试使用 -->
</body>
</html>
接下来式index.html页面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我是index.html的内容
<button>获取test</button>
<div style="width: 100px;height: 100px;border: 1px solid red">
</div>
<script>
window.onload=function(){
var button = document.querySelector("button");
//按钮触发事件
button.onclick = function () {
var ajax = new XMLHttpRequest();//异步请求
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
//只有当ajax.readyState==4 和 ajax.status==200时
//说明数据已经安全返回
console.log(ajax.response);
document.querySelector("div").innerHTML = ajax.response;
//用div获取返回的内容
}
}
}
ajax.open("get","ajax1.html");
ajax.send();
}
}
</script>
</body>
</html>
刚开始时index页面的运行结果如下图:
点击“获取test”按钮之后的结果如下图:
Ajax.readyState的状态码
状态码 | 代表的意思 |
---|---|
1 | 已经告知ajax相应的地址和传递方式 |
2 | 信息已经发送 |
3 | 请求的服务器存在 |
4 | 数据已经拿到 |
ajax.readyState==4,是否可以证明获取的数据可以正常返回?
不能证明获取的数据可以正常返回。ajax.readyState==4 时,只能说明数据已经被获取,只有当 ajax.readState==4 和 ajax.status==200 时,获取的数据才能正常返回