创建ajax的过程

小金子.

于 2024-03-25 19:33:22 发布

阅读量294

点赞数 5

文章标签： okhttp

本文链接：https://blog.csdn.net/m0_74114605/article/details/136990233

版权

本文详细介绍了如何使用JavaScript的XMLHttpRequest对象进行AJAX请求，包括创建请求、设置参数、发送请求以及处理响应状态。特别关注了GET和POST请求的区别，以及readyState和status的状态码含义。

摘要由CSDN通过智能技术生成

得分点

new XMLHttpRequest()、设置请求参数open()、发送请求request.send()、响应request.onreadystatechange

标准回答

创建ajax过程：

创建XHR对象：new XMLHttpRequest()
设置请求参数：AJAX.open(‘get’,根目录，true) get是获取方式，true是异步进行，false是同步进行
发送请求: request.send()，如果是get请求不需要参数，post请求需要参数request.send(data)
监听请求成功后的状态变化：根据状态码进行相应的处理。 XHR.onreadystatechange = function () { if (XHR.readyState == 4 && XHR.status == 200) { console.log(XHR.responseText); // 主动释放,JS本身也会回收的 XHR = null; } };

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击发送ajax请求</button>
    <script>
        const btn = document.querySelector('#btn')

        btn.addEventListener('click', function () {
            const p = new Promise((reslove, reject) => {
                //1.创建对象
                const xhr = new XMLHttpRequest();
                //2.初始化
                xhr.open('GET', 'https://api.apiopen.top/getJoke');
                //3.发送
                xhr.send();
                //4.处理响应结果
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        //判断响应状态码2xx
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //控制台输出响应码
                            reslove(xhr.response)
                        } else {
                            //控制台输出响应状态码
                            reject(xhr.status)
                        }
                    }
                }
            })
            p.then(value=>{
                console.log(value);
            },reason=>{
                console.log(reason);
            })


        })
    </script>
</body>

</html>

加分回答

POST请求需要设置请求头 readyState值说明

0：初始化,XHR对象已经创建,还未执行open

1：载入,已经调用open方法,但是还没发送请求

2：载入完成,请求已经发送完成

3：交互,可以接收到部分数据

4：数据全部返回

status值说明

200：成功

404：没有发现文件、查询或URl

500：服务器产生内部错误