介绍
Ajax是一种网页开发技术，全称是Asynchronous JavaScript and XML（异步JavaScript和XML）。作用如下：
- 数据交换：可以通过Ajax给服务器发送请求，并获取服务器响应的数据。即前端动态的发送Ajax到服务器端来获取相应数据，接收到数据后基于vue中的指令完成相应的数据渲染。
- 异步交互：能够在不中断用户操作(不重新加载整个页面)的情况下与服务器交换数据并更新部分网页。这意味着用户在提交请求后，仍然可以继续浏览或操作页面，直到服务器响应返回。
与异步交互相对：同步交互
同步交互：访问客户端——请求服务器——服务器处理(客服端等待)——服务器响应(客服端加载)——客户端继续访问
我们访问链接，加载图片、视频都属于同步交互，而异步交互则可在不中断客服端操作的情况下与服务器交换数据
原生Ajax
一、创建XMLHttpRequest对象，用于和服务器交换数据
var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
二、调用 XMLHttpRequest 对象中的 open() 方法来设置请求的方式和请求路径，并调用 send() 方法来向服务器发送请求
xhr.open(method, url, async);//发送异步请求
xhr.send(data);//发送请求
- method: 请求类型，如 “GET”, “POST”, “PUT”, “DELETE” 等。
- url: 请求的URL(此处使用本地文本代替)。
- async: (可选) 布尔值，表示请求是否异步，默认为true。
- data: (可选) 发送到服务器的数据，通常为json数据
三、获取服务器响应的数据
<script>
function loadDoc() {
var my_xml = new XMLHttpRequest();//创建XMLHttpRequest对象，它是实现Ajax通信的核心。
my_xml.onreadystatechange = function () {//为XML对象设置了一个事件处理器，用于监听readyState属性的变化。
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
my_xml.open("GET", "ajax_info.txt", true);
my_xml.send();
}
</script>onreadystatechange 是 my_xml 的一个标准事件处理器属性，用来监听 readyState 和 status 的属性变化，两属性不同的值代表不同的含义：
| readyState |
0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪 |
| status |
200: "OK" 403: "Forbidden" 404: "Not Found" |
当readyState变为4（请求已完成）并且HTTP状态码为200（请求成功）时，函数将进行：
- 使用document.getElementById("demo")获取页面中ID为demo的元素。
- 将该元素的innerHTML属性设置为this.responseText，即服务器返回的响应文本。
<!DOCTYPE html>//示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AAA专业苏打饼干打孔</title>
</head>
<body>
<input type="button" value="获取数据" onclick="loadDoc()">
<div id="demo"></div>
</body>
<script>
function loadDoc() {
var my_xml = new XMLHttpRequest();
my_xml.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
my_xml.open("GET", "../json/students_info.json", true);
my_xml.send();
}
</script>
</html>但这种方式比较繁琐，且在早期的浏览器中可能还会遇到兼容问题，所以原生Ajax已不再使用，现在所使用的是基于原生Ajax封装起来的技术如Axios
Axios
一、自备Axios文件并引入，或直接引入官方文档
<script src="js/axios-0.18.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
二、使用Axios发送请求，并获取响应结果
axios({
method: "get",//请求方式为get
url: 'http://example.com/api/cookies'//此处url仅做示范
//请求的路径，如需传递数据则在url后以?key=value,例:?name=123&age=123的形式传输数据
}).then((result) => {//.then响应服务器数据并调用"成功回调函数"
console.log(result.data); //拿到result中的data属性
});
axios({
method: "post",//post传输数据在请求体中传输，通过data属性来指定所传请求参数
url: 'http://example.com/api/cookies/${cookieId}',
data: "id=1"
}).then((result) => {
console.log('数据删除成功:', result.data);
});例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AAA专业苏打饼干打孔</title>
<script src="../js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据" onclick="get()">
<input type="button" value="删除数据" onclick="post()">
</body>
<script>
function get() {
//通过axios发送异步请求-get
axios({
method: "get",
url: 'https://yapi.pro/mock/557466/user/getById'
}).then((result) => {
console.log(result.data);
});
}
function del() {
//通过axios发送异步请求-post
axios({
method: "post",
url: 'https://yapi.pro/mock/557466/user/getById',
data: "id=1"
}).then((result) => {
console.log('数据删除成功:', result.data);
});
}
</script>
</html>但这种请求方式 过于复杂，为方便书写，Axios已经为支持的所有请求方式提供了请求方式的别名：
- axios.get(url, [config]):
- url: 必需，字符串，请求的服务器URL。
- config: 可选，配置对象，可以包含以下选项：
- params: 将被添加到URL查询字符串中的参数。
- headers: 请求头信息。
- responseType: 响应数据的类型，例如 ‘json’, ‘blob’, ‘document’, ‘arraybuffer’, ‘text’, ‘stream’。
- timeout: 请求超时的毫秒数。
- withCredentials: 是否跨站点请求时携带凭证（cookies）。
- axios.delete(url, [config]):
- url: 必需，字符串，请求的服务器URL。
- config: 可选，配置对象，与 axios.get 的配置选项类似，可以包含 params, headers, timeout, withCredentials 等属性。
- axios.post(url, [data], [config]):
- url: 必需，字符串，请求的服务器URL。data: 可选，要作为请求体发送的数据，可以是对象、字符串或数组。
- config: 可选，配置对象，与 axios.get 的配置选项类似，但还可以包含 data 的处理选项，如 transformRequest 和 transformResponse。
- axios.put(url, [data], [config]):
- url: 必需，字符串，请求的服务器URL。
- data: 可选，要作为请求体发送的数据，通常用于更新资源。
- config: 可选，配置对象，与 axios.post 的配置选项相同。
简化后：
<script>
function get() {
//通过axios发送异步请求-get
axios.get('http://example.com/api/cookies').then((result) => {
console.log(result.data);
});
}
function del() {
//通过axios发送异步请求-post
axios.post('http://example.com/api/cookies', id = 1).then((result) => {
console.log('数据删除成功:', result.data);
});
}
</script>- 接下来我们将其与vue放在一起使用，我们需要浏览器页面加载完成后自动发送异步请求到服务端获取数据，并自动将其渲染在页面中。想实现这一点离不开vue。
- 前面介绍过vue有生命周期，其中有八个钩子函数，我们需要在 mounted 钩子函数中发送异步请求。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AAA专业苏打饼干打孔</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> </tr> <tr align="center" v-for="(person, index) in emps" :key="index"> <td>{{ index+1}}</td> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td v-if="person.gender==1">{{ "男" }}</td> <td v-else-if="person.gender==2">{{ "女" }}</td> <td>{{ person.studentID }}</td> </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { emps: [], }, mounted() {//发送异步请求，访问数据 axios.get("https://yapi.pro/mock/557466/user/list").then(result => { this.emps = result.data.students; }) }, }) </script> </html>