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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: Navigator.sendBeacon()
slug: Web/API/Navigator/sendBeacon
translation_of: Web/API/Navigator/sendBeacon
---
<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
<p>Die <code><strong>navigator.sendBeacon()</strong></code> Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">navigator.sendBeacon(<em>url</em>, <em>data</em>);
</pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>url</code></dt>
<dd>Der <code>url</code> Parameter steht für die ermittelte URL, an die <code>data</code> zu senden ist. </dd>
</dl>
<dl>
<dt><code>data</code></dt>
<dd>Der Parameter <code>data</code> enthält zu übermittelnde Daten der Art {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}} oder {{domxref("FormData")}}.</dd>
</dl>
<h3 id="Rückgabewerte">Rückgabewerte</h3>
<p>Die <strong>sendBeacon()</strong> Methode gibt <code>true</code> zurück, falls der User Agent erfolgreich war, <code>data</code> zum Transfer bereit zu stellen. Andernfalls ist der Rückgabewert <code>false</code>.</p>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Diese Methode erfüllt Bedürfnisse von Analyse- und Diagnostik-Code, der regelmäßig versucht, Daten an den Server zu senden bevor der <em>unload</em> Vorgang einer Seite abgeschlossen ist. Daten schon früher zu senden, könnte eine unvollständige Datensammlung bewirken.<br>
Bislang war es für Entwickler schwierig, sicherzustellen, dass Daten während eines <em>unload</em> Vorgangs tatsächlich gesendet wurden.</p>
<p>Üblicherweise ignorieren User Agenten asynchrone XMLHttpRequests in einem <em>unload</em> Anweisungsblock. Dieses Problem wird in Analytik- und Diagnostik-Code oft umgangen, indem in einem <em>unload</em> oder <em>beforeunload</em> Anweisungsblock ein synchroner XMLHttpRequest zum Datenversand genutzt wird.<br>
Ein synchroner XMLHttpRequest zwingt den User Agenten den unload Vorgang des Dokuments zu verzögern, sodass jedoch die weitere Navigation langsamer wirkt. Der Eindruck einer schlechten Ladezeit der Folgeseite läst sich dabei nicht verhindern.</p>
<p>Es gibt weitere Techniken, die Datenübermittlung zu ermöglichen. Eine besteht darin, den <em>unload</em> Vorgang zu verzögern, indem man ein <em>image</em> Element erzeugt und dessen <code>src</code> Attribut innerhalb des unload Anweisungsblocks ändert. Da die meisten User Agenten den <em>unload</em> Vorgang verzögern werden bis das Nachladen des Bildes abgeschlossen ist, können so währenddessen noch Daten übermittelt werden.<br>
Noch eine andere Technnik verwendet eine einige Sekunden lange wirkungsfreie (<em>noop</em>) Schleife innerhalb des <em>unload</em> Anweisungsblocks, die das <em>unload</em> verzögert und zwischenzeitliche Datenübermittlung zum Server ermöglicht.</p>
<p>Diese alternativen Techniken stellen allerdings nicht nur schlechte Programmiermuster dar. Einige sind schlicht unzuverlässig und erzeugen den Eindruck schlechter Seitenladezeiten.</p>
<p>Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der versucht, Daten an den Server zu schicken mittels synchronem XMLHttpRequest innerhalb des <em>unload</em> Anweisungsblocks. Dies resultiert in einer Verzögerung des <em>unload</em> Vorgangs der Seite.</p>
<pre class="brush: js">window.addEventListener('unload', logData, false);
function logData() {
var client = new XMLHttpRequest();
client.open("POST", "/log", false); // der dritte Parameter bewirkt synchrones xhr
client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
client.send(analyticsData);
}
</pre>
<p>Durch Verwendung der <strong><code>sendBeacon()</code></strong> Methode werden Daten asynchron an den Server gesendet sobald der User Agent Gelegenheit dazu hat und zwar ohne das <em>unload</em> bzw. das Laden der nächsten Seite zu verzögen.</p>
<p>Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der Daten zum Server sendet mittels <strong><code>sendBeacon()</code></strong>Methode. </p>
<pre class="brush: js">window.addEventListener('unload', logData, false);
function logData() {
navigator.sendBeacon("/log", analyticsData);
}
</pre>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
<td>{{Spec2('Beacon')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(39.0)}}</td>
<td>{{CompatGeckoDesktop("31")}}</td>
<td>{{CompatNo}}</td>
<td>26</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(40.0)}}</td>
<td>{{CompatGeckoMobile("31")}}</td>
<td>2.5</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(42.0)}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{domxref("navigator", "navigator")}}</li>
</ul>
|
