关闭浏览器标签页时Ajax请求未执行的问题排查

嘿，这个问题我太熟了！你遇到的核心问题是异步AJAX请求在页面卸载时会被浏览器中断——当浏览器触发onbeforeunload事件时，它不会等你的异步请求完成就直接终止页面进程，所以服务器根本收不到数据。

原代码的问题点 #

你的$.ajax调用默认是异步模式（async: true），这种情况下浏览器不会等待请求完成就执行页面卸载流程，导致请求被中途掐断。另外return false;在onbeforeunload里并不能阻止页面关闭，只是不会触发默认的确认弹窗而已。

推荐解决方案：使用navigator.sendBeacon #

这是浏览器专门为页面卸载/刷新场景设计的API，它会把请求放入后台发送队列，保证请求尽可能被送达，同时不会阻塞页面卸载（用户体验更好）。修改后的代码如下：

window.onbeforeunload = closingCode;

function closingCode() {
  var logout = getCookie("current-time");
  // 构造FormData，适配sendBeacon的参数要求
  const formData = new FormData();
  formData.append('function2call', 'sendLogout');
  formData.append('arguments[]', person_ID);
  formData.append('arguments[]', "Logout");
  formData.append('arguments[]', "Logout");
  formData.append('arguments[]', logout);

  // 优先使用sendBeacon
  if (navigator.sendBeacon) {
    const success = navigator.sendBeacon('./scripts/Functions.php', formData);
    console.log(success ? "Logout beacon sent successfully" : "Failed to queue logout beacon");
  } else {
    // 兼容不支持sendBeacon的旧浏览器，用同步AJAX（注意：会阻塞页面关闭）
    $.ajax({
      url: './scripts/Functions.php',
      data: {
        function2call: 'sendLogout',
        arguments: [person_ID, "Logout", "Logout", logout]
      },
      type: 'post',
      async: false, // 必须设为同步，强制浏览器等待请求完成
      success: function(output) {
        console.log("Sent Analytics Value (Logout) via fallback");
      },
      error: function() {
        console.log("Fallback AJAX failed");
      }
    });
  }
}

额外注意事项 #

• 变量可访问性：确保person_ID在closingCode函数作用域内是可访问的（比如全局变量或者通过闭包传入）
• Cookie验证：调试时可以先console.log(logout)确认getCookie能正确获取到值
• 后端兼容：PHP后端可以正常通过$_POST['function2call']和$_POST['arguments']接收数据（arguments会是一个数组）

不推荐但可行的替代：同步AJAX #

如果你暂时不想用sendBeacon，可以直接把原AJAX的async设为false，强制浏览器等待请求完成后再卸载页面。但这种方式会导致页面关闭/刷新变慢，甚至出现假死状态，影响用户体验，所以只建议作为降级方案使用。

内容的提问来源于stack exchange，提问作者Shri