前端基础篇-深入了解 Ajax 、Axios

🔥博客主页: 【小扳_-CSDN博客】**
❤感谢大家点赞👍收藏⭐评论✍**

文章目录

[1.0 Ajax 概述](#1.0 Ajax 概述)

[2.0 Axios 概述](#2.0 Axios 概述)

[3.0 综合案例](#3.0 综合案例)


1.0 Ajax 概述

通过 Ajax 可以给服务器发送请求,并获取服务器响应的数据。异步交互是指,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:用户名是否可用的校验等等。

简单来说,Ajax 的作用就是用来发送请求给服务器,得到响应后获取数据。

举个例子:

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="id1">

    </div>
    
</body>
<script>

    /* 1.0 创建对象 */
    var xmlHttpRequest = new XMLHttpRequest();

    /* 2.0 发送异步请求 */
    xmlHttpRequest.open("get","http://api.doc.jiyou-tech.com/mock/6391/text");
    xmlHttpRequest.send();

    /* 3.0 获取数据 */
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            document.getElementById("id1").innerHTML = xmlHttpRequest.responseText;
        }
    }

</script>
</html>

运行结果:

成功获取服务器的响应,xmlHttpRequest.readyState 的值会赋值为 4 ,status 的值为 200 。

手册: AJAX - XMLHttpRequest 对象 (w3school.com.cn)

2.0 Axios 概述

Axios 是对原生的 Ajax 进行了封装,简化书写,快速开发。作用同样是给服务器发送请求,并获取服务器响应的数据。

引入 Axios 的 js 文件:

采取的是 CDN 的方式导入到 HTML 中。

html 复制代码
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

语法结构:

html 复制代码
<script>
    axios({
        methods:"get",
        url:"http://api.doc.jiyou-tech.com/mock/6391/text"
    }).then((result) => {
        alert(result);
    })
    axios({
        methods:"post",
        url:"http://api.doc.jiyou-tech.com/mock/6391/text"
    }).then((result) => {
        alert(result);
    })
</script>

如果在 get 中有参数添加,直接在 url 后面接上 ? 后面加上参数即可;如果在 post 中有参数添加,需要对象 data 中添加参数,如:

html 复制代码
    axios({
        methods:"post",
        url:"http://api.doc.jiyou-tech.com/mock/6391/text",
        data:"id=1"
    }).then((result) => {
        alert(result);
    })

还有更加简便的写法:

html 复制代码
<script>
axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result)
 => { alert(result);
    })
axios.post("http://api.doc.jiyou-tech.com/mock/6391/text","id=1").then((result)
 => { alert(result);
    })    
</script>
        

一般用这种方式比较多。

使用 Axios 发送请求,并获取响应结果

举个例子:

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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <span >{{emps.name}}</span>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps:""
        },
        mounted() {
            axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result) => {
                this.emps = result.data;
            })
        }
    
    })
</script>
</html>

利用 Axios 获取数据后,交给 Vue 进行网页的渲染。

3.0 综合案例

利用 Axios 向服务器发送请求,并返回服务器响应的结果,再交给 vue 对网页进行渲染。

模拟服务器中的数据:

代码如下:

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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" cellspacing="0px" align="center" width="400px">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
            <tr v-for="(emp, index) in emps">
                <td align="center">{{index+1}}</td>
                <td align="center">{{emp.name}}</td>
                <td align="center">{{emp.age}}</td>
                <td align="center" v-if="emp.gender == 1">男</td>
                <td align="center" v-if="emp.gender == 2">女</td>
                <td align="center">{{emp.score}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps:[]
        },
        mounted() {
            axios.get("http://api.doc.jiyou-tech.com/mock/6407/text").then((result) 
             => {  this.emps = result.data.data
                })
        }
    })
</script>
</html>

还用到了 vue 生命周期中的 mounted() ,挂载结束后,就会自动调用该函数。this 将获取的 json 赋值给当前对象的 emps 。

运行结果:

相关推荐
咖啡の猫几秒前
JavaScript 简单类型与复杂类型
开发语言·javascript
艾克马斯奎普特2 分钟前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js
Nickname肖知寒3 分钟前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·chrome·chrome devtools
关二哥拉二胡4 分钟前
前端的 AI 应用开发系列三:突破万能的基石 Function Calling
javascript·面试
勘察加熊人6 分钟前
angular+form实现2048小游戏
javascript·ecmascript·angular.js
FanetheDivine8 分钟前
发现一个Solid中的坑
前端·javascript·react.js
Cache技术分享18 分钟前
40. Java 使用 `switch` 语句进行分支选择
前端·后端
zzkrix24 分钟前
浏览器插件 - kimi 历史会话清理助手
前端
前端开发张小七28 分钟前
11.Python设计模式:单例模式与工厂模式实战指南
前端·python
fayeyoko36 分钟前
vue如何实现触摸板双指滑动(非长按滑动)
vue.js