Ajax入门
来源：黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili
Ajax
Ajax介绍
概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。
作用：
-
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
-
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
同步与异步：
-
同步：在服务器处理数据的过程，客户端浏览器一直处于等待状态，直到服务器处理完毕，响应数据给客户端，客户端才能继续执行其他操作。
-
异步：服务器在处理数据的过程中，浏览器客户端是可以继续执行其他操作，客户端不需要等待服务器响应的结果。
原生Ajax
准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
创建XMLHttpRequest对象：用于和服务器交换数据
<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div> </body> <script>function getData(){//1. 创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}} </script>向服务器发送请求
获取服务器响应数据
代码实例：
当点击“获取数据”按钮的时候，会调用对应的方法。
创建好XMLHttpRequest对象。
发起GET请求，获取数据。
获取服务器端响应回来的数据，将响应回来的数据填充在div这个区域当中。
<!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(){//1. 创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); //2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求 //3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}} </script> </html>
Axios2
介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网： Axios中文文档 | Axios中文网
Axios入门
Axios入门：
引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>使用Axios发送请求，并获取响应结果
axios({method: "get", // 请求方式url: "http://yapi.smart-xwork.cn/mock/169327/emp/list" // 请求路径 }).then((result) => { // 成功回调函数console.log(result.data); });// 获取服务器端响应回来的数据，使用箭头函数的形式，Ajax请求成功之后自动调用的函数，接收一个js的对象result，通过result.data就可以拿到result里面的data属性。或者 axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data); })axios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", // 根据id删除信息data: "id=1" // 指定post的请求参数 }).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); })
请求方式别名：
axios.get(url [, config])
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {console.log(result.data); });axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {console.log(result.data); });axios.put(url [, data[, config]])
案例
基于Vue及Axios完成数据的动态加载展示
数据准备的url： http://yapi.smart-xwork.cn/mock/169327/emp/list
在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1 代表男，2 代表女)。
在页面加载完成之后，通过vue的生命周期来 自动的发送异步请求。
<!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 () { // 当Vue对象创建完成之后，触发这个钩子函数//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data; // 为当前Vue对象当中的emps数据模型赋值})}});
</script>
</html>