Ajax是一种技术的统称，只要通过JS语言异步的向服务器发送请求，并获取到响应结果，那么这就是Ajax。
最先实现这个技术的是微软IE浏览器，实现了一个构造函数xmlHttpRequest，简称XHR，XHR并不能说是Ajax，而是Ajax的一种实现方式。
后面随着H5与ES6的出现，又出现一个技术，Fetch。这两种方式都是浏览器原生对Ajax的实现。
经常会有面试题问到，ajax与fetch的区别，其实，这真正要进行对比的是XHR与Fetch。因为这两者都是对Ajax的实现方式。
如下图:
所有的第三方库的功能边界都是由原生来解决的，原生做不到的，第三方库同样做不到，就像JS做不到的，vue这些框架也不可能做到。
像axios，在浏览器端是使用XHR封装的，意味着axios继承了XHR的所有优点与缺点，umi-request由Fetch封装，Fetch做不到的功能，umi一定做不到。
XHR不能响应流数据，但是axios可以，那是因为针对这种场景，axios又使用Fetch封装了该功能。
Ajax运行的环境是在浏览器当中，脱离了浏览器，就谈不上Ajax了，XHR与Fetch就不能运行了。像axios就有两套代码，在浏览器中它就使用针对浏览器的XHR，在node环境中就使用http内置模块。
navigator.sendBeacon：是一种WEB API，是浏览器独有的。它的出现是为了满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 unload 事件处理器中产生的异步 XMLHttpRequest。
优点:
- 1.不受页面卸载过程的影响，确保数据可靠发送。
- 2.异步执行，不阻塞页面关闭或跳转。
- 3.能够发送跨域请求。
缺点:
- 1.fetch 和 ajax 都可以发送任意请求 而 sendBeacon 只能发送POST
- 2.fetch 和 ajax 可以传输任意字节数据 而 sendBeacon 只能传送少量数据（64KB 以内）
- 3.fetch 和 ajax 可以定义任意请求头 而 sendBeacon 无法自定义请求头
- 4.sendBeacon 只能传输 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据
- 5.如果处于危险的网络环境，或者开启了广告屏蔽插件 此请求将无效
navigator.sendBeacon 应用场景： 1.发送心跳包：可以使用 navigator.sendBeacon 发送心跳包，以保持与服务器的长连接，避免因为长时间没有网络请求而导致连接被关闭。 2.埋点：可以使用 navigator.sendBeacon 在页面关闭或卸载时记录用户在线时间，pv uv，以及错误日志上报 按钮点击次数。 发送用户反馈：可以使用 navigator.sendBeacon 发送用户反馈信息，如用户意见、bug 报告等，以便进行产品优化和改进。
navigator.sendBeacon更多详细内容可查看MDN文档: [:](Navigator.sendBeacon() - Web API 接口参考 | MDN --- Navigator.sendBeacon（）- Web API 接口参考|MDN (mozilla.org))
