Ajax fetch navigator.sendBeacon 三个的区别

Ajax，fetch，和 navigator.sendBeacon 都用于与服务器交互，但它们有不同的用途和特性。

1. Ajax (Asynchronous JavaScript and XML):

   • 用于在不刷新页面的情况下更新网页数据。
   • 基于 XMLHttpRequest 对象。
   • 不是原生 JavaScript，需要处理跨域请求。
   • 不保证完整的请求发送，如果浏览器已关闭，可能不发送。

var xhr = new XMLHttpRequest();
xhr.open("GET", "ajax_info.txt", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("ajax").innerHTML = xhr.responseText;
  }
};
xhr.send();

2. fetch API:

   • 现代的、强大的、灵活的用于网络请求的接口。
   • 基于 Promise，提供了更好的错误处理机制。
   • 支持请求并发和缓存管理。
   • 不是所有浏览器都支持（特别是旧浏览器）。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.error(e));

3. navigator.sendBeacon:

   • 用于向服务器异步发送数据，确保在关闭页面前发送数据。
   • 适用于需要在浏览器关闭或用户离开页面前发送数据的场景。
   • 不需要服务器响应，适合发送日志和分析数据。
   • 通常用于页面统计和监控。

var analyticsData = new FormData();
analyticsData.append('key', 'value');
navigator.sendBeacon(new URL('/analytics', location.href));

Ajax 和 fetch 都是基于 HTTP 请求，而 sendBeacon 主要用于低开销、异步的数据发送。选择哪一个取决于具体需求，如数据的紧急性、是否需要服务器响应、以及对浏览器兼容性的要求。