【JavaWeb】Day14.前后端交互基础——Ajax

Ajax（Asynchronous JavaScript And XML）

1.概念：异步的JavaScript和XML。

2.作用：

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

注意：AJAX 并不是编程语言。AJAX 是一种从网页访问 Web 服务器的技术。

同步与异步 

同步请求是指当前发出请求后，浏览器什么都不能做， 必须得等到请求完成返回数据之后，才会执行后续的代码。当JS代码加载到当前Ajax的时候会把页面里所有的代码停止加载，页面处于一个假死状态。当这个Ajax执行完毕后才会继续运行其他代码页面解除假死状态

异步请求就是当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，可以完全不影响用户的体验效果。无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

原生Ajax步骤 

1. 准备数据地址（获取数据的服务器网站）
2. 创建XMLHttpRequest对象：用于和服务器交换数据
3. 向服务器发送请求
4. 获取服务器响应数据

script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET','数据网址');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

注意：原生Ajax写法过于繁琐所以不推荐使用 

Axios

接下来学习一下比起原生Ajax更为简单Axios框架

• 介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
• 官网： 起步 | Axios中文文档 | Axios中文网

Axios入门

1.引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2.使用Axios发送请求，并获取响应结果。axios可以请求的方法：

• get：获取数据，请求指定的信息，返回实体对象
• post：向指定资源提交数据（例如表单提交或文件上传）
• put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
• patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
• delete：请求服务器删除指定的数据

//get请求
axios({
    method: "get",
    url: "网址"
}).then((result) => {
    console.log(result.data);
});

//post请求
axios({
    method: "post",
    url: "网址",
    data: "id=1"
}).then((result) => {
    console.log(result.data);
});

Axios为简化书写 提供了请求的别名

• axios.get(url [, config])（地址后面加逗号可带其他参数）
• axios.delete(url [, config])
• axios.post(url [, data[, config]])
• axios.put(url [, data[, config]])

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