一、Ajax介绍
1.Ajax概述
Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2
点：
与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：
搜索联想、用户名是否可用的校验等等。
2.Ajax作用
我们详细的解释一下Ajax技术的2个作用
与服务器进行数据交互
如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台
服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前
端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面
了。此处可以对比JavaSE中的网络编程技术来理解。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
如下图所示，当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，
在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模
块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面
的加载速度，用户体验高。
3.同步异步
针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。
同步请求发送过程如下图所示：
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只
能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。
二、使用ajax
1.使用apifox设计接口
2.复制url
3.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div>
<!-- 写一个ajax请求 -->
<script>
function getData(){
// 1.创建对象
var xhr = new XMLHttpRequest();
// 2.连接服务器
xhr.open('get','https://apifoxmock.com/m1/5467697-5143100-default/app1/get1');
// 3.发送请求
xhr.send();
// 4.接收请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
}
console.log(xhr.responseText);
}
}
</script>
</body>
</html>页面效果
点击获取数据，在控制台展示获取的信息