使用XMLHttpRequest对象发送post和get请求

最新推荐文章于 2025-02-10 19:07:24 发布

晓晓2022

最新推荐文章于 2025-02-10 19:07:24 发布

阅读量3k

点赞数

分类专栏：前端基础文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_45911604/article/details/123705582

版权

前端基础专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用XMLHttpRequest对象进行POST和GET请求，包括请求方式的区别、响应获取及POST请求参数的处理。

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

使用XMLHttpRequest对象发送post和get请求

效果展示：
在这里插入图片描述
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1,使用xhr发送get请求
        //创建一个XMLHttpRequest()对象
        var xhr = new XMLHttpRequest();
        //调用open()函数,指定请求方式和请求地址
        xhr.open('get','http://www.liulongbin.top:3006/api/getbooks?id=1');
        //调用send()函数发送ajax请求
        xhr.send();
        //监听事件onreadystatechange
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4&&xhr.status === 200)
            {
                //代码运行到这里,get请求非常成功
                //注意这里的responseText就是响应回来的数据
                console.log(xhr.responseText);
            }
        }
        // 2,使用xhr发送post请求
        //创建一个XMLHttpRequest对象
        var xhr2 = new XMLHttpRequest();
        //调用open()函数,指定请求方式和地址
        xhr2.open('post','http://www.liulongbin.top:3006/api/addbook');
        //设置Content-Type
        xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //调用send()函数
        xhr2.send('bookname=aaa&author=aaaa&publisher=aaaa');
        //监听事件
        xhr2.onreadystatechange = function () {
            if(xhr2.readyState === 4&&xhr2.status === 200)
            {
                //代码运行到这里,get请求非常成功
                //注意这里的responseText就是响应回来的数据
                console.log(xhr2.responseText);
            }
        }
    </script>
</body>
</html>