[前端]原生ajax的get方法和post方法

最新推荐文章于 2024-04-14 21:09:52 发布

xiaoxiao_0721

最新推荐文章于 2024-04-14 21:09:52 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45397462/article/details/96702136

本文介绍了如何使用XMLHttpRequest对象发起GET和POST请求的基本步骤。GET请求用于获取资源，而POST请求则用于发送数据到服务器。文章通过具体实例展示了设置请求方式、路径、监听响应事件以及发送请求的方法。

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


        // 1.创建XMLHttpRequest对象，建议变量名叫xhr 一般在网站中都是用xhr代表ajax请求
        var xhr = new XMLHttpRequest()

        // 2.调用open方法，设置请求方式和请求路径
        // 参数1：请求方式 参数2：请求路径url(下面是我随便写的一个路径)
        xhr.open('get', 'https://autumnfish.cn/api/joke')

        // 3.监听响应完成事件
        xhr.onreadystatechange = function () {
            // 在这个事件里面才能拿到服务器返回的数据
            console.log(xhr.responseText);
        }

        // 4.调用send方法发送请求
        xhr.send();

在这里插入图片描述


    <script>
        // 1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest()

        //2. 调用open方法设置请求方式、请求路径
        // 参数1：请求方式 参数2：请求路径url(下面是我随便写的一个路径)
        xhr.open('post', 'https://autumnfish.cn/api/user/check');

        //3. 监听响应完成事件
        xhr.onreadystatechange = function () {
            console.log(xhr.responseText);
        }

        // 4.设置请求头(注意:post请求必须设置请求头,用formData方法不用设置请求头)
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        //5. 发送请求
        // 多个参数之间也是用&连接
        xhr.send('username=吖吖');

    </script>

在这里插入图片描述