ajax请求——XMLHttpRequest请求

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

一、GET

html 复制代码
<!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

html 复制代码
<!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}));//携带的参数

相关推荐
Judy1623几秒前
巧用 VSCode 与 AI 编码提升 Vue 前端开发效率
前端·javascript·ai 编程
清崖几秒前
MVVM 模式,和 MVC 模式区别
前端
OpenTiny社区几秒前
TinyEngine2.3版本发布:界面更美观、操作更便捷、路由能力再次升级
前端·低代码·开源
疯狂的魔鬼1 分钟前
Vue3 计算属性 computed 实现原理解析
前端·javascript
谎言西西里4 分钟前
现代前端开发必备:一步步解析 AJAX+手写AJAX请求 💻✨
前端·ajax
剽悍一小兔14 分钟前
React如何使用JSX语法
前端
前端付杰15 分钟前
Vue 透传实战: 如何用 $attrs 和 v-bind 提升代码效率
前端·javascript·vue.js
Jason秀啊29 分钟前
强大的CSS变量
前端·css
三天不学习1 小时前
JavaScript 中 call 和 apply 的用法与区别
开发语言·前端·javascript
大聪明了1 小时前
Nuxt3 使用 ElementUI Plus报错问题
前端