同步与异步操作最主要的区别：
同步操作必须按照以上步骤执行，而异步操作在第四步响应客户端时，可以继续执行第二步请求服务器，即客户端可以执行其它操作
数据地址：console-mock.apipost.cn/mock/4250f8d4-b605-47eb-9777-07e29548dbb8/list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center">学生信息表</h1>
<table border="1" cellspacing="0" width="60%" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图片</th>
<th>性别</th>
<th>职业</th>
<th>入职时间</th>
</tr>
<tr align="center" v-for="item in users">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<img :src="item.image" width="100px" height="100px" alt="">
</td>
<td>
<span v-if="item.gender === 1">男</span>
<span v-if="item.gender === 2">女</span>
</td>
<td>{{item.job}}</td>
<td>{{item.entrydate}}</td>
</tr>
</table>
<input type="button" value="获取数据" v-on:click="ajax()">
</div>
<script>
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#app",
data(){
return{
users:[],
}
},
methods:{
ajax() {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open("GET", "https://console-mock.apipost.cn/mock/4250f8d4-b605-47eb-9777-07e29548dbb8/list", true);
// 发送请求
xhr.send();
// 监听请求状态
xhr.onreadystatechange = () =>{
if (xhr.readyState == 4 && xhr.status == 200) {
this.users=JSON.parse(xhr.responseText).data
console.log("this.users:",this.users);
}
}
}
}
})
</script>
</body>
</html>
标签：异步,12,console,交互技术,item,xhr,Ajax,mock,users From： https://www.cnblogs.com/REN-Murphy/p/18102237