先补个知识点：
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>ajax中的onload和readychange区别
原文地址：https://www.cnblogs.com/doudoublog/p/8608360.html