在Web关闭页面时发送Ajax请求的实现方法

实现在Web关闭页面时发送Ajax请求，通常需要借助onbeforeunload事件。onbeforeunload事件是一个在页面卸载前触发的事件，在该事件中可以执行一些异步请求的逻辑，实现在页面关闭前的相关操作。

下面是实现在Web关闭页面时发送Ajax请求的步骤：

1.绑定onbeforeunload事件

window.onbeforeunload = function () {
  // 做一些操作
}

2.在onbeforeunload事件中发送Ajax请求

window.onbeforeunload = function () {
  // 发送ajax请求
  var xhr = new XMLHttpRequest();
  xhr.open('get', '/api/close', false);  // 使用同步请求，确保请求能够被发送
  xhr.send(null);
}

注意： 同步请求阻塞了页面的关闭，不推荐使用。可以通过添加延时时间和使用异步请求的方式完成操作，确保页面的正常关闭。

3.使用异步请求完成操作

window.onbeforeunload = function () {
  setTimeout(function () {
    // 发送ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('get', '/api/close', true); // 异步请求
    xhr.send(null);
  }, 500); // 延时时间为500ms
}

示例一：记录用户离开页面的时间

window.onbeforeunload = function() {
  setTimeout(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/closepage', true);
    xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
    xhr.send(JSON.stringify({time: new Date()}));
  }, 500); // 延时时间为500ms
}

在这个示例中，我们向服务器发送了一个POST请求，将当前的时间作为参数发送到服务器。在服务器端，我们可以将这个时间记录下来，用来统计用户在网站上的停留时间。

示例二：保存表单数据

window.onbeforeunload = function (event) {
  var form = document.querySelector('form');
  var formData = new FormData(form);
  localStorage.setItem('formData', JSON.stringify([...formData.entries()]));
  setTimeout(function() {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/saveform', true);
      xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
      xhr.send(localStorage.getItem('formData'));
  }, 500); // 延时时间为500ms
}

在这个示例中，我们获取了表单中的数据，将数据转换为JSON字符串，并存储到LocalStorage中。在页面关闭前，我们对这个数据进行异步的POST请求，将数据发送到服务器保存。这个方法可以确保即使用户突然关闭了页面，我们的表单数据仍然能够被保存下来。

总的来说，实现在Web关闭页面时发送Ajax请求，可以借助onbeforeunload事件，并使用异步请求的方式完成操作。具体实现的场景有很多，可以根据实际需求，灵活运用。