1 简介：
- 概念：异步的JS与XML。
- 作用：
- 数据交换：给服务器发送请求，获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
AJAX 并非编程语言。
AJAX 仅仅组合了：
- 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
- JavaScript 和 HTML DOM（显示或使用数据）
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
原生Ajax示例如下：
Function loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 而原生方式繁琐且可能不兼容，所以现在学习封装的Axios；
2 Axios：
Axios对原生Ajax进行了封装，简化书写，快速开发。
1 引入
可以本地引入，也可以cdn引入
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>2 使用Axios发送请求，并获取响应结果：
主要通过下面案例进行学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部链接引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- cdn引入axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<style>
.scoretable {
width: 50%;
margin: 0 auto; /* 居中显示 */
border: 1px solid black; /* 实线边框 */
border-collapse: collapse; /* 合并边框 */
}
.scoretable td {
border: 1px solid black; /* 对表格单元格添加实线边框 */
text-align: center; /* 内容居中 */
}
.scoretable th {
border: 1px solid black; /* 对表格单元格添加实线边框 */
text-align: center; /* 内容居中 */
}
</style>
</head>
<body>
<!-- 编写视图 -->
<div id="app">
<table class="scoretable">
<tr>
<th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>分数</th><th>等级</th>
</tr>
<tr v-for="(student,index) in students">
<td>{{index+1}}</td><td>{{student.name}}</td><td>{{student.age}}</td><td v-if="student.gender==1">男</td><td v-else-if="student.gender==2">女</td><td>{{student.score}}</td>
<td v-show="student.score>=85">优秀</td><td v-show="student.score>=60&&student.score<85">合格</td><td v-show="student.score<60"><span style="color: red;">不合格</span></td>
</tr>
</table>
</div>
</body>
<!-- 在JS中创建Vue对象，定义数据模型 -->
<script>
new Vue({
el:"#app",
data:{
//students数据模型定义为空数组，用于接收要用的数据（也是个数组）
students:[]
},
mounted() {
//发送异步请求，加载数据
axios.get("http://www.cmd137blog.top/temp/testdata01.html").then(result=>{
//result.data得到返回的JSON数据对象，JSON数据中的data才是要用的数据所以用result.data.data，并把它赋予students数据模型
this.students=result.data.data
})
}
})
</script>
</html>注：实际上不能按照按预选运行，因为还不会搞后端服务器部分，但程序逻辑及参考价值没问题，后续会了再回来改吧…
