先来说一下几种常见的状态码：
（１）readyState状态码：
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
（２）HTTP状态码：
200：服务器成功返回网页
404：请求的网页不存在
503：服务器暂时不可用
两种方式：
（１）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>（２）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>