1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: 使用 Beacon API
slug: conflicting/Web/API/Beacon_API
tags:
- Web 性能
- 指南
translation_of: Web/API/Beacon_API/Using_the_Beacon_API
original_slug: Web/API/Beacon_API/Using_the_Beacon_API
---
<div>{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}</div>
<p><strong><code>Beacon</code></strong> 接口用来调度向 Web 服务器发送的异步非阻塞请求。</p>
<ul>
<li>Beacon 请求使用 HTTP <code>POST</code> 方法，并且不需要有响应。</li>
<li>Beacon 请求能确保在页面触发 unload 之前完成初始化。</li>
</ul>
<p>这篇文档包含了 Beacon 接口的一些例子，可以在 {{domxref("Beacon_API","Beacon API")}} 查阅对应的 API。</p>
<h2 id="Navigator.sendBeacon">Navigator.sendBeacon()</h2>
<p>Beacon API 的 {{domxref("Navigator.sendBeacon()")}} ，会在<em>全局上下文</em>中向服务器发起一个 <em>beacon</em> 请求。这个方法需要两个参数: <code>URL</code> 以及要发送的数据 <code>data</code> 。其中 <code>data</code> 参数是可选的，它的类型可以为 {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, 或者 {{domxref("FormData")}}.</p>
<p>如果浏览器成功地将 beacon 请求加入到待发送的队列里，这个方法将会返回 <code>true</code> ，否则将会返回 <code>false</code> 。</p>
<p>下面的例子注册了 {{event("load")}} 事件和 {{event("beforeunload")}} 事件的回调函数， 并且在回调函数里面调用了 <code>sendBeacon()</code> 方法。</p>
<pre class="brush: js">window.onload = window.onunload = function analytics(event) {
if (!navigator.sendBeacon) return;
var url = "https://example.com/analytics";
// 创建待发送数据
var data = "state=" + event.type + "&location=" + location.href;
// 发送beacon请求
var status = navigator.sendBeacon(url, data);
// 打印数据以及结果
console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};
</pre>
<p>接下来的例子创建了一个 {{event("submit")}} 事件的回调函数，并且当submit事件触发时，调用 <code>sendBeacon()</code>方法。</p>
<pre class="brush: js">window.onsubmit = function send_analytics() {
var data = JSON.stringify({
location: location.href,
time: Date()
});
navigator.sendBeacon('/analytics', data);
};
</pre>
<h2 id="WorkerNavigator.sendBeacon">WorkerNavigator.sendBeacon()</h2>
<p>Beacon API 的 {{domxref("WorkerNavigator.sendBeacon()")}} 的使用方法，跟平常的使用方法完全相同，区别仅在与这个方法存在 <em>{{domxref("WorkerGlobalScope","worker 全局作用域")}} </em>中</p>
<p>接下来的例子展示了，使用 {{domxref("Worker")}} 发送了一个 beacon 请求，使用了全局上下文的 URL 和数据。</p>
<p>这是全局上下文的代码片段:</p>
<pre class="brush: js">function worker_send(url, data) {
// 创建 worker 对象
var myWorker = new Worker("worker-using.js");
// 向 worker 发送 URL 以及 data
myWorker.postMessage([url, data]);
// 注册回调函数接收来自 worker 的成功或失败信息
myWorker.onmessage = function(event) {
var msg = event.data;
// 打印 worker 的发送状态
console.log("Worker reply: sendBeacon() status = " + msg);
};
}
</pre>
<p>这是 worker 中的代码片段 (<code>worker-using.js</code>):</p>
<pre class="brush: js">onmessage = function(event) {
var msg = event.data;
// 从 msg 中分离 URL 和 data
var url = msg[0];
var data = msg[1];
// 如果浏览器支持在 worker 里面调用 sendBeacon()， 那就发送beacon请求
// 否则返回失败信息给全局上下文
if (self.navigator.sendBeacon) {
var status = self.navigator.sendBeacon(url, data);
postMessage(status ? "success" : "fail");
} else {
postMessage("Worker: self.navigator.sendBeacon is unsupported");
}
}
</pre>
<h2 id="查看更多">查看更多</h2>
<ul>
<li>{{domxref("Beacon_API","Beacon API")}} (概览)</li>
<li><a href="https://w3c.github.io/beacon/">Beacon 标准</a></li>
<li><a href="http://caniuse.com/#search=beacon">Beacon CanIUse 数据</a></li>
</ul>
|
