跳至主要內容

AJAX

2023年3月10日约 2169 字大约 7 分钟Vue

AJAX

Ajax: Asynchronous JavaScript And XML,异步的 JavaScript 和 XML 。

其作用有如下2点:

同步异步

Ajax 的局部刷新功能是是异步的,与之对应的有同步请求。

原生Ajax

Ajax请求是基于客户端发送请求,服务器响应数据的技术。

服务器端: 后台服务器地址

1669105963948
1669105963948

客户端:

第一步:按钮绑定单击事件,点击按钮,发送ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
     
    }
</script>
</html>

第二步:创建 XMLHttpRequest 对象,用于和服务器交换数据,也是原生Ajax请求的核心对象

//1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

第三步:调用对象的 open() 方法设置请求的参数信息,例如请求地址,请求方式。然后调用 send() 方法向服务器发送请求

//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求

第四步:通过绑定事件的方式,来获取服务器响应的数据。

//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
    //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应, 200表示这是一个正确的Http请求,没有错误
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
    }
}
1669106705778
1669106705778

并且通过浏览器的F12抓包,点击网络中的 XHR 请求,可以抓包到我们发送的 Ajax 请求。 XHR 代表的就是异步请求

Axios

Axios是对原生的 AJAX 进行封装,简化书写。

Axios的基本使用

Axios的使用比较简单,主要分为2步:

  1. 引入Axios文件

    <script src="js/axios-0.18.0.js"></script>
  2. 使用Axios发送请求,并获取响应结果

    发送 get 请求

    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

    发送 post 请求

    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    });

axios()是用来发送异步请求的,小括号中使用 js 的JSON对象传递请求相关的参数:

then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以获取到响应的数据。

Axios快速入门

后端实现

查询所有员工:http://yapi.smart-xwork.cn/mock/169327/emp/list

根据员工id删除员工:http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端实现

在html中引入axios所依赖的js文件,并且提供2个按钮,绑定单击事件,分别用于点击时发送ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
    }

    function post(){
        //通过axios发送异步请求-post
    }
</script>
</html>

get请求代码如下:

//通过axios发送异步请求-get
 axios({
     method: "get",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
 }).then(result => {
     console.log(result.data);
 })

post请求代码如下:

//通过axios发送异步请求-post
 axios({
     method: "post",
     url: "http://yapi.smart-xwork.cn/mock/169327/empdeleteById",
     data: "id=1"
 }).then(result => {
     console.log(result.data);
 })

浏览器打开,f12抓包,然后分别点击2个按钮,查看控制台效果如下:

1669109382408
1669109382408
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        axios({
            method: "get",
            url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result => {
            console.log(result.data);
        })


    }

    function post(){
       // 通过axios发送异步请求-post
        axios({
            method: "post",
            url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data: "id=1"
        }).then(result => {
            console.log(result.data);
        })

    }
</script>
</html>

请求方法的别名

Axios还针对不同的请求,提供了别名方式的api

方法描述
axios.get(url [, config])发送get请求
axios.delete(url [, config])发送delete请求
axios.post(url [, data[, config]])发送post请求
axios.put(url [, data[, config]])发送put请求

get请求改写成如下:

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

post请求改写成如下:

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

案例

需求:基于 Vue 及 Axios 完成数据的动态加载展示

1669139756551
1669139756551

数据地址是:http://yapi.smart-xwork.cn/mock/169327/emp/list

步骤:

  1. 首先创建文件,提前准备基础代码,包括表格以及vue.js, axios.js文件的引入
  2. 需要在vue的mounted钩子函数中发送ajax请求,获取数据
  3. 拿到数据,数据需要绑定给vue的 data 属性
  4. 在 <tr> 标签上通过 v-for 指令遍历数据,展示数据

代码实现:

  1. 首先创建文件,提前准备基础代码,包括表格以及vue.js和axios.js文件的引入

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ajax-Axios-案例</title>
        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <table border="1" cellspacing="0" width="60%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>图像</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                </tr>
    
                <tr align="center" >
                    <td>1</td>
                    <td>Tom</td>
                    <td>
                        <img src="" width="70px" height="50px">
                    </td>
                    <td>
                        <span>男</span>
                      <!-- <span>女</span>-->
                    </td>
                    <td>班主任</td>
                    <td>2009-08-09</td>
                    <td>2009-08-09 12:00:00</td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        new Vue({
          el: "#app",
          data: {
            
          }
        });
    </script>
    </html>
  2. 在 vue 的 mounted 钩子函数,编写Ajax请求,请求数据

    mounted () {
        //发送异步请求,加载数据
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            
        })
    }
  3. ajax 请求的数据绑定给 vue 的 data 属性,之后才能进行数据绑定到视图;并且浏览器打开后台地址,数据返回格式:

    1669141982809
    1669141982809

    服务器响应的json中的data属性才是我们需要展示的信息,所以我们应该将员工列表信息赋值给vue的data属性,代码如下:

     //发送异步请求,加载数据
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        this.emps = result.data.data;
    })

    其中,data中emps变量

    data: {
        emps:[]
    },
  4. 在<tr>标签上通过v-for指令遍历数据,展示数据,其中需要注意的是图片的值,需要使用vue的属性绑定,男女的展示需要使用条件判断

    <tr align="center" v-for="(emp,index) in emps">
        <td>{{index + 1}}</td>
        <td>{{emp.name}}</td>
        <td>
            <img :src="emp.image" width="70px" height="50px">
        </td>
        <td>
            <span v-if="emp.gender == 1">男</span>
            <span v-if="emp.gender == 2">女</span>
        </td>
        <td>{{emp.job}}</td>
        <td>{{emp.entrydate}}</td>
        <td>{{emp.updatetime}}</td>
    </tr>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>