先来说一下几种常见的状态码:
(1)readyState状态码:
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
(2)HTTP状态码:
200:服务器成功返回网页
404:请求的网页不存在
503:服务器暂时不可用
两种方式:
(1)onreadystatechange方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc() {
// 创建XMLHttpRequest对象
let xmlhttp = new XMLHttpRequest();
// 请求未初始化,此时的readyState状态码是0
console.log(xmlhttp.readyState);
xmlhttp.onreadystatechange= function(){
// 进入到onreadystatechange里面,表示请求已完成,在控制台输出1,2,3,4
console.log(this.readyState);
// 进行判断,如果readystate状态码是4且HTTP状态码是200,表示成功
if (this.readyState===4 && this.status===200)
{
document.getElementById("myDiv").innerHTML=this.responseText;
}
};
//在同级目录下新建一个ajax.txt
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
(2)onload方式:监听不到1,2,3,这是它和onreadyState的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc() {
// 创建XMLHttpRequest对象
let xmlhttp = new XMLHttpRequest();
// 请求未初始化,此时的readyState状态码是0
console.log(xmlhttp.readyState);
xmlhttp.onload = function(){
// 进入到onload里面,表示请求已完成,在控制台输出4,监听不到1,2,3
console.log(this.readyState);
document.getElementById("myDiv").innerHTML=this.responseText;
};
//在同级目录下新建一个ajax.txt
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>