doubleyong
管理员
管理员
  • 最后登录2021-09-29
  • 发帖数1035
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:359回复:0

[前端]ajax中onreadstatechange 事件 与onload事件

楼主#
更多 发布于:2021-08-20 16:58


1、onreadystatechange
XMLHttpRequest对象有一个属性readyState,onreadystatechange事件,当readyState的值发生改时触发



readyState 共有5个值。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪


示例代码:
function getList(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','getList',true);
            xhr.onreadystatechange = function(){
                console.log("readyState:"+ xhr.readyState);
                console.log(xhr.responseText);
            }
            xhr.send();
        }
onreadystatechange 事件中,使用xhr.readyState打印后发现可以打印其readyState为2,readyState为3,readyState为4



而我们通常会在readyState为4,以status状态码为200时,进行相应的处理,


代码如下:
function getList(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','getList',true);
            xhr.onreadystatechange = function(){
               if(xhr.readyState==4&&xhr.status==200){
                     console.log("获取数据为:"+xhr.responseText);
               }
            }
            xhr.send();
        }




2、onload进入onload之后,只出现了状态码4。也就是说,只有处于状态码4,请求已完成,响应已就绪的情况下,才会进入onload。只要进入onload请求中,一定是已经到4这个状态了。


function getList(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','getList',true);
            xhr.onload= function(){
                console.log("readyState:"+ xhr.readyState);
                console.log(xhr.responseText);
            }
            xhr.send();
        }


注:此时如果修改open中的路径为错误路径的话,会出现如下状况。仍然会打印1和4,证明已经进入onload请求状态。这里报错的原因是,HTTP状态码不是200。

参考:https://blog.csdn.net/yuzhoaheyou/article/details/106563208
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号