Navigator.sendBeacon()

navigator.sendBeacon() 方法可以用来从用户代理向服务器异步地发送小的HTTP数据。

语法

navigator.sendBeacon(url, data);

参数

url

url 参数表明 data 将要被发送到的网络地址。

data

data 参数是将要发送的 ArrayBufferView, Blob, DOMString, 或者 FormData 类型的数据。

返回值

sendBeacon() 方法返回 true 如果用户代理能够成功地将要发送的数据排入队列，否则返回 false 。

描述

这个方法主要用于满足 统计和诊断代码 的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而， 对于开发者来说保证在文档卸载期间发送数据一直是一个困难。

用户代理通常会忽略在卸载事件处理器中产生的异步 XMLHttpRequest 。为了解决这个问题， 统计和诊断代码 通常要在 unload 或者beforeunload 事件处理器中发起一个同步 XMLHttpRequest 来发送数据。同步的 XMLHttpRequest 迫使用户代理延迟卸载文档，并使得下一个导航（navigation）出现的更晚。下一个页面对于这种较差的载入表现无能为力。

有一些技术被用来保证数据的发送。其中一种是通过在卸载事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送。因为绝大多数用户代理会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。另一种技术是通过创建一个几秒钟的 no-op 循环来延迟卸载并向服务器发送数据。

这些技术不仅有较差的编码模式，其中的一些甚至并不可靠而且会导致非常差的页面载入性能。

下面的例子展示了一个理论上的统计代码——在卸载事件处理器中尝试通过一个同步的 XMLHttpRequest 向服务器发送数据。这导致了页面卸载被延迟。

window.addEventListener('unload', logData, false);

function logData() {
    var client = new XMLHttpRequest();
    client.open("POST", "/log", false); // 第三个参数表明是同步的 xhr
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(analyticsData);
}

使用 sendBeacon() 方法，将会在用户代理有机会时异步地想服务器发送数据，同时并不会延迟页面的卸载或影响下一导航的载入性能。

下面的例子展示了一个理论上的统计代码模式——通过使用 sendBeacon() 方法向服务器发送数据。

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

规范

浏览器兼容性

相关链接

• navigator