前端和后台本来是没有联系的，前端想要从后台获取数据，就必须涉及到两个程序的交互，而Ajax就是用于完成两端交互的技术。
Ajax：Asynchronous JavaScript And XML：异步的JavaScript和XML。
异步交互：可以在不重新加载整个页面的情况下，和服务器进行交换数据并更新部分网页，比如：搜索联想、用户名校验。
Ajax的主要作用：
1.和服务器进行数据交互
前端资源虽然被浏览器解析了，但是缺少数据；可以通过Ajax技术，像后台服务器发起请求，后台服务器收到前端请求。
从数据库中按要求获取数据响应给前端，前端得到数据，再渲染展示。
2.异步交互
可以在不重新加载整个页面的情况下，和服务器交换数据，并更新部分网页。
同步和异步：
同步请求：服务器接收，服务器处理请求，需要时间——此时客户端必须等待服务器响应的时间，等到服务端响应之后，客户端才能继续处理。
异步请求：其他和同步请求类似，但是只是在等待服务端响应的时候，客户端可以进行其他操作，无需等待。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax入门</title>
</head>
<body></body>
<script>// 前端和后台本来是没有联系的，前端想要从后台获取数据，就必须涉及到两个程序的交互，而Ajax就是用于完成两端交互的技术// Ajax：Asynchronous JavaScript And XML：异步的JavaScript和XML// 异步交互：可以在不重新加载整个页面的情况下，和服务器进行交换数据并更新部分网页，比如：搜索联想、用户名校验// Ajax的主要作用：// 1.和服务器进行数据交互// 前端资源虽然被浏览器解析了，但是缺少数据；可以通过Ajax技术，像后台服务器发起请求，后台服务器收到前端请求// 从数据库中按要求获取数据响应给前端，前端得到数据，再渲染展示// 2.异步交互// 可以在不重新加载整个页面的情况下，和服务器交换数据，并更新部分网页// 同步和异步：// 同步请求：服务器接收，服务器处理请求，需要时间——此时客户端必须等待服务器响应的时间，等到服务端响应之后，客户端才能继续处理// 异步请求：其他和同步请求类似，但是只是在等待服务端响应的时候，客户端可以进行其他操作，无需等待</script>
</html>
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios</title>
</head><body><button id="getData" type="button">GET</button><button id="postData" type="button">POST</button>
</body><script src="js/axios.js"></script>
<script>// 使用原生的Ajax请求还是比较繁琐，所以说一般使用Axios，Axios是对于Ajax的封装，主要是为了简化书写// Axios使用比较简单，主要分为两步// 1.在script标签的src中引入Axios文件// 特别注意，这里是需要一对单独的script标签进行引入，而不是在引入的script标签中写代码// 2.编写Axios代码，并绑定按钮// Get请求：//GET请求// document.querySelector('#getData').onclick = function() {// axios({// url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',// method:'get'// }).then(function(res) {// console.log(res.data);// }).catch(function(err) {// console.log(err);// })// }// //POST请求// document.querySelector('#postData').onclick = function() {// axios({// url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',// method:'post'// }).then(function(res) {// console.log(res.data);// }).catch(function(err) {// console.log(err);// })// }// Axios还针对了不同请求，提供了不同的api// axios.请求方式(url, data, config) （data是post请求需要携带的数据，config是配置信息）// 可以简化代码document.querySelector("#getData").addEventListener('click', function () {axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {console.log(result.data)}).catch(error => {console.log(error)});})
</script></html>
制定方法+模板指南)
)
