JAVA-Web端学习4 Ajax

如果一个人只剩下回忆以前的过往，证明他现在一定一无所有。

Ajax介绍

简单来说，Ajax 的核心价值在于“‌异步通信‌”和“‌局部刷新‌”。传统网页每次交互都需要刷新整个页面，而使用 Ajax 后，浏览器可以在后台悄悄向服务器请求数据，拿到结果后再只更新页面的某一小块区域——就像你在聊天时不用重新打开整个对话窗口就能收到新消息一样自然流畅 。

作用概括为：
①数据交换：通过Ajax可以给服务器发送请求，从而获取服务器响应的数据
②异步交互：可以在不加载整个界面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验

同步和异步

Ajax基本操作

现在我们通常使用Axios。Axios对原生的Ajax进行了封装，简化书写，快速开发。

基本结构如下：

axios({
    url:远端链接,
    method: 请求方式Get/Post,
}).then((result)=>{
    传送成功执行操作
}).catch((err)=>{
   失败执行操作
})

详细代码如下：

<input type="button" value="获取数据Get" id="btnGet">
<input type="button" value="传送数据Post" id="btnPost">
<script src="axios.js"> </script>
<script>
    document.querySelector("#btnGet").addEventListener('click',()=>{
        axios({
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
            method: 'GET',
        }).then((result)=>{
            console.log(result);
        }).catch((err)=>{
            console.log(err);
        })
    })
    document.querySelector("#btnPost").addEventListener('click',()=>{
        axios({
                  url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
                  method: 'POST',
              }).then((result)=>{
            console.log(result);
        }).catch((err)=>{
            console.log(err);
        })
    })
</script>

效果如下，可以看到点击Get操作后获得传送回来的数据，点击Post操作后获取上传的数据，我们没传送所以data是null：

Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名。

格式为：axios.请求方法(url,data,config,...)

上面的代码使用请求方式别名也就是：

<input type="button" value="获取数据Get" id="btnGet">
<input type="button" value="传送数据Post" id="btnPost">
<script src="axios.js"> </script>
<script>
    document.querySelector("#btnGet").addEventListener('click',()=>{

        axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result)=>{
            console.log(result);
        }).catch((err)=>{
            console.log(err);
        })
    })
    document.querySelector("#btnPost").addEventListener('click',()=>{

        axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update').then((result)=>{
            console.log(result);
        }).catch((err)=>{
            console.log(err);
        })
    })
</script>

异步操作对比

给代码添加一行输出函数，从而体现异步操作

document.querySelector("#btnGet").addEventListener('click',()=>{

    axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result)=>{ //①
        console.log(result);
    }).catch((err)=>{
        console.log(err);
    });

    console.log('=================================================='); //②
})

可以看到，先执行②再执行①，因为异步操作下，客户端不会等待远端服务端执行完成再来执行接下来的操作