如何通过Javascript捕获监听document type类型的HTTP服务端请求

嘿，这个需求我太懂了！之前做后台系统的时候，经常遇到页面处理慢的情况，用户点了按钮半天没反应，以为没触发，反复点击反而搞出问题。要捕获这种非AJAX的文档类型请求（也就是会触发页面刷新/跳转的server-side请求），不用纠结Server-Side Events的文档类型区分，有几个简单可靠的方法，我给你一步步说：

1. 监听链接点击事件 #

大部分非AJAX请求都是用户点击页面内的链接触发的，我们可以全局监听所有<a>标签的点击行为，在请求发送前显示加载提示：

// 全局监听点击事件，捕获所有链接点击
document.addEventListener('click', function(e) {
  // 找到被点击的最外层a标签（避免点击链接内的子元素）
  const targetLink = e.target.closest('a');
  
  if (targetLink) {
    // 排除新窗口打开的链接（target="_blank"），这类请求不影响当前页面
    if (!targetLink.target || targetLink.target === '_self') {
      // 显示加载提示
      showLoadingIndicator();
    }
  }
});

// 自定义加载提示函数（你可以改成自己的样式/GIF）
function showLoadingIndicator() {
  // 先检查是否已经存在加载提示，避免重复创建
  if (document.getElementById('loading-indicator')) return;

  const loader = document.createElement('div');
  loader.id = 'loading-indicator';
  loader.innerHTML = `
    <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999;">
      <div style="background: white; padding: 2rem; border-radius: 8px;">
        <img src="/path/to/your/loading.gif" alt="加载中" style="width: 40px; height: 40px; margin-right: 1rem;" />
        <span>正在处理，请稍候...</span>
      </div>
    </div>
  `;
  document.body.appendChild(loader);
}

2. 监听表单提交事件 #

表单提交是另一个常见的非AJAX请求场景，同样全局监听：

// 全局监听表单提交
document.addEventListener('submit', function(e) {
  // 显示加载提示
  showLoadingIndicator();
  
  // 不要阻止默认提交行为！我们只是提前显示提示，让表单正常向server发送请求
});

3. 监听页面卸载事件（覆盖所有场景） #

如果用户是手动输入URL、点击浏览器刷新按钮，或者通过location.href/location.reload()等JS方法触发页面刷新，上面两种方法就覆盖不到了。这时候可以用beforeunload事件，它会在页面即将卸载（刷新/跳转）时触发：

// 监听页面卸载前的事件
window.addEventListener('beforeunload', function(e) {
  showLoadingIndicator();
  
  // 注意：不要设置`e.returnValue`，否则会弹出浏览器默认的"确定要离开吗？"提示框
  // 我们只需要在页面上显示自定义的加载提示即可
});

注意事项 #

• 加载提示的样式一定要用position: fixed固定在视口，避免页面滚动后用户看不到；
• 如果你的页面有特殊的跳转逻辑（比如JS触发的location.href），可以在触发跳转前手动调用showLoadingIndicator()；
• 不需要担心加载提示的清理：因为页面一旦跳转/刷新，当前页面的DOM会被销毁，新页面加载后提示自然就消失了。

这些方法组合起来，就能覆盖几乎所有非AJAX的server-side请求场景，用户再也不会对着没反应的页面发呆啦～

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