Ajax fetch navigator.sendBeacon 三个的区别

Ajax 和 fetch 都是用于在客户端发起请求的技术，而 navigator.sendBeacon 是用于在浏览器后台发送请求的技术。

1. Ajax: Ajax 是一种在客户端发起异步请求的技术。它通过 XMLHttpRequest 对象发送请求，并接收服务器返回的响应。Ajax 请求通常不会中断当前页面的加载过程，可以通过事件监听来处理请求的结果。使用 Ajax 可以实现多种类型的请求（GET、POST 等），可以设置请求头、发送请求参数等。

2. fetch: fetch 是一种基于 Promise 的网络请求技术，它提供了更简洁的 API 来发起请求和处理响应。fetch 请求返回一个 Promise 对象，可以通过 then() 方法来处理请求结果。fetch API 提供了一系列的方法和选项，可以设置请求类型、请求头、发送请求参数等。相比于 Ajax，fetch API 更为现代化和灵活，更易于使用和理解。

3. navigator.sendBeacon: navigator.sendBeacon 是一种在浏览器后台发送请求的技术。它可以在用户离开当前页面时发送请求，确保请求能够被发送到服务器。与 Ajax 和 fetch 不同，navigator.sendBeacon 不需要接收服务器返回的响应，因此它适用于像数据分析、日志记录等不需要即时响应的场景。navigator.sendBeacon 只能发送简单的 POST 请求，并且无法自定义请求头。

总结来说，Ajax 和 fetch 是用于在前台异步发起网络请求的技术，而 navigator.sendBeacon 则是用于在后台发送请求的技术。它们的具体使用场景和功能略有差异。

介绍下navigator.sendBeacon

navigator.sendBeacon是一个浏览器提供的API，用于在不阻塞页面卸载的情况下发送异步HTTP请求。

使用navigator.sendBeacon方法可以发送一个包含指定数据的POST请求。该方法接受两个参数，第一个参数是要发送请求的URL，第二个参数是一个可以是Blob或者ArrayBufferView对象，用于传输的数据。

sendBeacon方法的工作原理是在浏览器后台使用异步方式发送请求，不会阻塞页面的操作。这种方式适用于发送一些对页面响应不敏感或者不需要处理返回结果的请求，比如发送统计信息和日志等。

该方法一般在页面卸载前被调用，例如在beforeunload事件中发送请求，确保请求能够成功发送并且不会影响页面的正常操作。

需要注意的是，由于sendBeacon方法是异步操作，并且无法处理返回结果，因此无法检查请求的成功与失败状态。如果需要确保请求成功并处理返回结果，建议使用XMLHttpRequest或Fetch API等其他方法来发送请求。