当用户离开页面时如何可靠地发送HTTP请求

2022-08-08204次阅读原生Jsjavascript

HTTP在某些情况下,当用户执行诸如导航到不同页面或提交表单之类的操作时,需要发送带有一些数据的请求以进行打点记录。例如在点击链接时向服务器发送一些信息.

 

使用Fetch的keepalive属性

keepalive属性用于页面卸载时,告诉浏览器在后台保持连接,继续发送数据。
一个典型的场景就是,用户离开网页时,脚本向服务器提交一些用户行为的统计信息。这时,如果不用keepalive属性,数据可能无法发送,因为浏览器已经把页面卸载了。

<a href="/some-other-page" id="link">Go to Page</a>

<script>
  document.getElementById('link').addEventListener('click', (e) => {
    fetch("/log", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }, 
      body: JSON.stringify({
        some: "data"
      }), 
      keepalive: true
    });
  });
</script>

 

使用Navigator.sendBeacon()

navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。

它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

 

a标签的ping属性

值得一提的是,越来越多的浏览器支持该ping属性。当附加到链接时,它会触发一个小POST请求:

<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
  Go to Other Page
</a>

这些请求标头将包含单击链接的页面 ( ping-from),以及href该链接的值 (ping-to):

headers: {
  'ping-from': 'http://localhost:3000/',
  'ping-to': 'http://localhost:3000/other'
  'content-type': 'text/ping'
  // ...other headers
},

它在技术上类似于发送信标,但有一些明显的限制:

它严格限制在链接上的使用,如果您需要跟踪与其他交互相关的数据,例如按钮点击或表单提交,这将使其无法启动。

  1. 浏览器支持很好,但不是很好在撰写本文时,Firefox 特别没有默认启用它。
  2. 您无法随请求一起发送任何自定义数据。如前所述,您将获得的最多的是几个 ping-*标题,以及其他任何标题。

综合考虑,ping如果您可以发送简单的请求并且不想编写任何自定义 JavaScript,那么它是一个很好的工具。但是,如果您需要发送更多实质内容,则可能不是最好的选择。

 

 

上一篇: :any-link选择器仅匹配有超链接的a元素  下一篇: :has()用于查找奇数gird网格  

当用户离开页面时如何可靠地发送HTTP请求相关文章