Ajax请求的两种方式demo

最新推荐文章于 2025-03-08 11:27:20 发布

hr226

最新推荐文章于 2025-03-08 11:27:20 发布

阅读量638

点赞数

分类专栏： demo 文章标签： Ajax请求的两种方式demo

本文链接：https://blog.youkuaiyun.com/hr226/article/details/100750123

版权

demo 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Ajax请求的两种常见处理方式——onload和onreadystatechange，通过实例代码对比分析它们的区别和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax请求的两种方式
onload VS onreadystatechange

ajax1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax 1 - 请求纯文本</title>
</head>

<body>
    <button id="button">请求纯文本</button>

    <br><br>

    <div id="text"></div>

    <script>
        document.getElementById('button').addEventListener("click", loadText);

        function loadText() {
            // console.log('Hello World!')
            // 创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // console.log(xhr);
            // open(type,url/file,async)  type:get拿到数据/post请求数据  请求的url地址或file地址  是否要异步
            xhr.open('GET', 'sample.txt', true);
            // console.log("READYSTATE：", xhr.readyState);  //状态码为1

            // 网页还没加载完，希望有一个转圈的加载提示 onprogress可以用进程来监听
            xhr.onprogress = function() {
                // console.log("测试READYSTATE：", xhr.readyState); //结果 readyState的状态码是3
            }

            /* readyState 状态码
                    0：请求未初始化
                    1：服务器连接已建立
                    2：请求已接收
                    3：请求处理中
                    4：请求已完成，且响应已就绪 */

            /* HTTP 状态码
             200 - 服务器成功返回网页
             404 - 请求的网页不存在
             503 - 服务器暂时不可用 */

            // ajax有两种方式请求 onload/onreadystatechange
            // 区别：有一个属性readyState：只要进入onload里面，状态码即为4；onreadystatechange的状态码有2、3、4
            xhr.onload = function() {
                // console.log("READYSTATE：", xhr.readyState); //状态码为4
                // console.log(this.responseText);
                document.getElementById('text').innerHTML = this.responseText;
            }

            xhr.onreadystatechange = function() {
                // console.log("READYSTATE：", xhr.readyState);  ///状态码为2、3、4
                if (this.status == 200 && this.readyState == 4) {
                    // console.log(this.responseText);
                    document.getElementById('text').innerHTML = this.responseText;
                } else if (this.status == 404) {
                    // console.log('请求的网页不存在');
                    document.getElementById('text').innerHTML = '404 NOT Found';
                }
            }

            // 发送请求
            xhr.send();
        }
    </script>
</body>

</html>

sample.txt

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptas beatae iste officia temporibus, soluta impedit aut dicta nisi, aliquam fugiat cumque officiis eaque, magnam accusantium! Iure earum totam cumque.