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

 🔥博客主页： 【小扳_-CSDN博客】

❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 Ajax 概述

        2.0 Axios 概述

        3.0 综合案例

        1.0 Ajax 概述

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

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

举个例子：

    
    
    Document


    
    
    


    /* 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;
        }
    }

运行结果：

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

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

        2.0 Axios 概述

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

引入 Axios 的 js 文件：

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

语法结构：

    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);
    })

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

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

还有更加简便的写法：

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);
    })    

        

        一般用这种方式比较多。

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

举个例子：

    
    
    Document
    
    


    
        {{emps.name}}
    
    


    new Vue({
        el:"#app",
        data:{
            emps:""
        },
        mounted() {
            axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result) => {
                this.emps = result.data;
            })
        }
    
    })

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

        3.0 综合案例

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

模拟服务器中的数据：

代码如下：

    
    
    Document
    
    


    
        

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

运行结果：