先补个知识点：
readyState 状态码：
0:请求未初始化
1:服务器连接已建立
2:请求已接受
3:请求处理中
4:请求已完成，且响应已就绪
HTTP 状态码：
200 - 服务器成功返回网页
404 - 请求的网页不存在
503 - 服务器暂时不可用
首先在自己目录下建立一个ajaxText.txt用来测试，ajax必须要服务器里面执行，我当前是在apach本地服务器测试的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<button id="btn" value="请求数据">请求数据</button>
<p id="c"></p>
<body>
<!-- open(type, url/file,async) -->
<script type="text/javascript">
let btnRequest = document.getElementById(‘btn‘);
btnRequest.addEventListener(‘click‘, load, false);
function load() {
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘, ‘ajaxTest.txt‘,true);
//两种方式请求 onload / onreadystatechange
xhr.onload = function(){
console.log(`onload 状态码${xhr.readyState}`);
console.log(`这是onload函数请求的文本:${this.responseText}`);
}
//当state状态发生改变时回调一次后面的匿名函数
xhr.onreadystatechange = function(){
console.log(`onreadystatechange 状态码${xhr.readyState}`);
console.log(`这是onreadychange函数请求的文本:${this.responseText}`);
}
xhr.send();
}
</script>
</body>
</html>
console：
onreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数，而onload只有状态码为4时才能回调一次函数。
这边提下onprogress()，也就是当状态码为3时，会执行这个函数。
当服务器正常的话基本上都会返回readyState 状态码0~4，但是不一定请求得到数据，所以有个http状态码来判断。
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200)
{
console.log(`请求成功并返回数据${this.responseText}`);
}
}
在onload（）里面也是一样，这里的逻辑根据情况来写。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<button id="btn">请求数据</button>
<p id="c"></p>
<body>
<!-- open(type, url/file,async) -->
<script type="text/javascript">
let btnRequest = document.getElementById(‘btn‘);
btnRequest.addEventListener(‘click‘, load, false);
function load() {
let xhr = new XMLHttpRequest();
xhr.open(‘GET‘, ‘ajaxTest.txt‘,true);
//两种方式请求 onload / onreadystatechange
// xhr.onload = function(){
// if (xhr.status == 200)
// {
// console.log(`请求成功并返回数据${this.responseText}`);
// }
// else{
// console.log(`请求不成功`);
// }
//// console.log(`onload 状态码${xhr.readyState}`);
//// console.log(`这是onload函数请求的文本:${this.responseText}`);
// }
//当state状态发生改变时回调一次后面的匿名函数
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200)
{
let p = document.createElement("p");
p.innerHTML = this.responseText;
document.body.appendChild(p);
console.log(`请求成功并返回数据${this.responseText}`);
}
}
xhr.send();
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/doudoublog/p/8608360.html
时间： 2024-10-10 19:32:31