JavaWeb——Ajax介绍以及案例和Axios使用

Ajax简介:

 同步与异步 

同步请求：

在客户端向服务器发送请求之后，直到服务器处理后逻辑产生响应之后客户端才能执行其他操作。

比如在搜索框内输入一个网站的网址访问后，只有整个html页面加载出来了，但是点击任何一个地方都没法跳转，只有整个页面完全加载完成，在服务器端响应完成之后，在网页上的操作才会有反应。

异步请求：

在发送一个请求，在网页上还是可以执行其他操作，不需要等待前一个请求的响应结果。

 原生Ajax

 前后端交互的主流数据格式:json

Ajax核心: XMLHttpRequest对象

测试案例 

  

点击过后输出如下，成功通过Ajax把服务器的数据展示到页面上 

 Axios的使用

在上面的原生Ajax请求使用起来比较不便，所以现在有了一个基于原生Ajax封装起来的Axios

定义:  

使用方式

axio基本格式: 

传递一个对象，包含method和url两个属性，一个是请求方式，一个是请求路径

get方式传参：可以在url后面使用?key=value的方式传参

post方式传参:在请求体当中传参数，使用一个名为data的属性。

要获取服务器传递回来的数据在后面加上.then(),在括号里面传递一个函数，在这里使用箭头函数的形式。通过在函数里面接收一个js对象result，通过result.data拿到响应数据。

axio({

method:"请求方法",

url:"请求路径"

}).then(函数);

 第一步，引入axios文件

新建一个js文件夹，将从官方网站下载来的axios-0.18.0.js文件丢进去

在html里面引入

第二步:准备html页面

在上面得到代码里面，我们可以看见，get请求用于进行查询，post请求用于进行删除，模拟前后端联动的增删查改中的两个操作，运行效果如下

axios支持的不同请求方式 

 使用简化的方式发送get和post请求

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



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

案例:

 使用到vue还要引入一个vue.js的文件，同时指定vue接管的区域是id="app"的区域，在该区域定义一个表格.vue的生命周期中有八个钩子函数，加载完成之后使用钩子函数发送异步请求。如mounted(),拿到返回的数据后赋值给vue中的数据模型emps:[] 

拿到数据后在视图层只需要遍历展示拿到的数据即可

    
    
    
    
    
    


    

        

            

                
编号
                
姓名
                
图像
                
性别
                
职位
                
入职日期
                
最后操作时间
            

            

                
{{index + 1}}
                
{{emp.name}}
                

                    
                
                

                    男
                    女
                
                
{{emp.job}}
                
{{emp.entrydate}}
                
{{emp.updatetime}}