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}));//携带的参数

相关推荐
Cmoigo3 分钟前
React Native自定义View(Android侧)
前端·react native
LanceJiang8 分钟前
文本溢出移入Tooltip提示,我的LeText组件
前端·vue.js
moreface9 分钟前
uni.request 配置流式接收+通义千问实现多轮对话
前端·vue.js·人工智能
大元9913 分钟前
前端必须知道的emoji知识
前端
不服就干15 分钟前
js通过游览器启动本地的绿色软件
前端·javascript
零零壹1115 分钟前
理解Akamai EdgeGrid认证在REST API中的应用
前端·后端
大元9915 分钟前
QuickMaster站点分析平台技术调研
前端
徐小夕18 分钟前
JSCAD:一款JavaScript驱动的开源3D设计神器
前端·javascript·github
sanly_shi28 分钟前
Interview preparation.md
前端·javascript·vue.js·网络协议
我命由我1234530 分钟前
微信小程序项目问题:tabBar.borderStyle 字段需为 black,white
前端·javascript·微信小程序·小程序·前端框架·html·html5