ajax请求——XMLHttpRequest请求

 个人练习笔记-----Ajax01

一、GET

<!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>
    <div id="dom">内容</div>
    <button onclick="getData()">发送请求</button>
    <script>
        //目前前后端数据请求,使用的都是ajax技术(网络请求技术),其中原生Ajax就是XMLHttpRequest,其次衍生的更加方便好用的Ajax有:fetch、axios
        function getData(){
            // 1.先创建XHR对象
            var xhr=new XMLHttpRequest();
            // 2.通过open方法,配置请求
            xhr.open("GET","https://v5.crmeb.net/api/groom/list/3?page=1&limit=9");
            // 5.添加请求头setRequestHeader()  Content-Type:用于设置请求参数的格式,设置 “?参数” 或者 “‘请求体’参数” ,以什么样的格式传递给服务器
                 // setRequestHeader()位置要放在open()和send()中间
            xhr.setRequestHeader("Content-Type","application/json");
                 // setRequestHeader("Authori-Zation","...")用户登录身份(加密过的)
            xhr.setRequestHeader("Authori-Zation","Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwd2QiOiJkNDFkOGNkOThmMDBiMjA0ZTk4MDA5OThlY2Y4NDI3ZSIsImlzcyI6InY1LmNybWViLm5ldCIsImF1ZCI6InY1LmNybWViLm5ldCIsImlhdCI6MTcwMzQ4ODk3MCwibmJmIjoxNzAzNDg4OTcwLCJleHAiOjE3MDYwODA5NzAsImp0aSI6eyJpZCI6NTA2NzYsInR5cGUiOiJhcGkifX0.HAvGkn0unJ6XvBjC_fp5WOkCPOu7qlNxwedmJAF5wOk")
            // 3.将这个接口请求,发送至服务器
            xhr.send();
            // 4.监听请求状态 readyStatus的变化,就会触发 onreadystatechange 事件
            xhr.onreadystatechange=()=>{
                
                if(xhr.readyState===4 && xhr.status ===200){
                    // 请求成功,可以接收数据,responseText:以字符串形式返回服务器数据,需要转化为JSON对象
                    const data=JSON.parse(xhr.responseText);
                    console.log(data);
                }
            }


        }
    </script>
</body>
</html>

 https://v5.crmeb.net/api/groom/list/3?page=1&limit=9  ------协议:// 域名 / 地址?参数

1.xhr.open("GET","https://v5.crmeb.net/api/groom/list/3?page=1&limit=9");对应的参数从下图中所示中获取

2.xhr.setRequestHeader("Content-Type","application/json");//验证身份

xhr.setRequestHeader("Authori-Zation","Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwd2QiOiJkNDFkOGNkOThmMDBiMjA0ZTk4MDA5OThlY2Y4NDI3ZSIsImlzcyI6InY1LmNybWViLm5ldCIsImF1ZCI6InY1LmNybWViLm5ldCIsImlhdCI6MTcwMzQ4ODk3MCwibmJmIjoxNzAzNDg4OTcwLCJleHAiOjE3MDYwODA5NzAsImp0aSI6eyJpZCI6NTA2NzYsInR5cGUiOiJhcGkifX0.HAvGkn0unJ6XvBjC_fp5WOkCPOu7qlNxwedmJAF5wOk")

在请求头中查找 ,具体解释在开头代码中

Content-Type : application/json;//字符串(参数)格式

二、POST

<!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 onclick="getNum()">购物车+1</button>
    <script>
        function getNum(){
            // 1.先创建
        let xhr=new XMLHttpRequest();
        // 2.打开open()
        xhr.open("POST","https://v5.crmeb.net/api/cart/num");
        xhr.setRequestHeader("Content-Type","application/json")
        xhr.setRequestHeader("Authori-Zation","Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwd2QiOiJkNDFkOGNkOThmMDBiMjA0ZTk4MDA5OThlY2Y4NDI3ZSIsImlzcyI6InY1LmNybWViLm5ldCIsImF1ZCI6InY1LmNybWViLm5ldCIsImlhdCI6MTcwMzQ4ODk3MCwibmJmIjoxNzAzNDg4OTcwLCJleHAiOjE3MDYwODA5NzAsImp0aSI6eyJpZCI6NTA2NzYsInR5cGUiOiJhcGkifX0.HAvGkn0unJ6XvBjC_fp5WOkCPOu7qlNxwedmJAF5wOk");
        // 3.发送send()
        xhr.send(JSON.stringify({id:4821,number:7}));
        // 4.监听请求状态onreadystatechange
        xhr.onreadystatechange=()=>{
            if (xhr.readyState === 4 && xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            console.log(data);
          }
        }
        }
    </script>
</body>
</html>

发送请求

xhr.send(JSON.stringify({id:4821,number:7}));//携带的参数

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值