ajax中的onload和readychange区别

Posted scandf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax中的onload和readychange区别相关的知识,希望对你有一定的参考价值。

先补个知识点:

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区别的主要内容,如果未能解决你的问题,请参考以下文章

如何在 AJAX 成功函数中调用 element.onload?

Ajax中onload和onreadystatechange两种请求方式的区别

可以用 xhr.onload 替换 xhr.onreadystatechange 来进行 AJAX 调用吗?

Ajax实现聊天室

防止 AJAX 中的滚动重置

来自 IE 的不一致的 ajax (XDR) 响应