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
|
---
title: Navigator.sendBeacon()
slug: Web/API/Navigator/sendBeacon-vi
tags:
- API
- Beacon
- Navigator
- sendBeacon
- web perfomance
translation_of: Web/API/Navigator/sendBeacon
---
<div><span class="seoSummary">Phương thức <code><strong>navigator.sendBeacon()</strong></code> gửi </span>{{glossary("Asynchronous", "bất đồng bộ")}} 1 lượng nhỏ dữ liệu đến máy chủ (web server) thông qua giao thức {{Glossary("HTTP")}} .</div>
<h2 id="Cú_pháp">Cú pháp</h2>
<pre class="syntaxbox notranslate">navigator.sendBeacon(<var>url</var>, <var>data</var>);
</pre>
<h3 id="Tham_Số">Tham Số</h3>
<dl>
<dt><code><var>url</var></code></dt>
<dd>Đường dẫn để nhận dữ liệu (Tạo request). Có thể là đường dẫn tuyệt đối hoặc tương đối.</dd>
<dt><code><var>data</var></code></dt>
<dd>Một đối tượng chứa dữ liệu để gửi đi có thể là 1 {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, {{domxref("FormData")}}, hoặc {{domxref("URLSearchParams")}}.</dd>
</dl>
<h3 id="Giá_trị_trả_về">Giá trị trả về</h3>
<p>Phương thức <code><strong>sendBeacon()</strong></code> trả về <code>true</code> nếu như {{glossary("user agent")}} (tác nhân người dùng hay web browser) xếp <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dữ liệu (data)</span></font> để gửi đi thành công. Nếu không, sẽ trả về <code>false</code>.</p>
<h2 id="Mô_tả">Mô tả</h2>
<p>Phương thức này dùng cho phân tích và chuẩn đoán cần gửi dữ liệu về máy chủ trước thời điểm đóng trang, nếu như gửi sớm hơn, có thể sẽ bị thiếu thông tin cần thu thập. Ví dụ, đường dẫn nào người dùng nhấn vào trước khi chuyển đến trang khác và đóng trang.</p>
<p>Việc đảm bảo rằng dữ liệu được gửi đi trong khi đóng trang (unload) trước đây thường rất khó để thực hiện, bởi user agents (web browser) luôn bỏ qua những {{domxref("XMLHttpRequest")}} bất đồng bộ được chạy trong sự kiện {{domxref("Window/unload_event", "unload")}}.</p>
<p>Trước đây, người ta thường làm trễ thời gian tải lại trang đủ lâu để gửi được dữ liệu đi bằng 1 số cách sau:</p>
<ul>
<li>Gửi dữ liệu với 1 <code>XMLHttpRequest</code> đồng bộ, chặn các xử lý khác, được gọi trong sự kiện <code>unload</code> hoặc {{domxref("Window/beforeunload_event", "beforeunload")}}.</li>
<li>Tạo 1 thẻ {{HTMLElement("img")}} và đặt thuộc tính <code>src</code> trong khi xử lý <code>unload</code>. Hầu hết các user agents (trình duyệt) sẽ làm trễ việc tải lại trang cho đến khi tải xong ảnh.</li>
<li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Tạo vòng lặp không xử lý gì chạy trong vài giây khi </span></font>unload</code>.</li>
</ul>
<p>Tất cả những phương thức đó đều chặn quá trình tải lại trang, làm chậm việc chuyển đến trang tiếp theo. Trang tiếp theo không thể làm gì để ngăn chặn việc này, vì vậy trang mới sẽ có vẻ chậm đi, mặc dù đó là lỗi từ trang trước.</p>
<p>Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server bằng 1 <code>XMLHttpRequest</code> đồng bộ trong khi xử lý <code>unload</code>. Điều này làm trễ việc tải trang tiếp theo.</p>
<pre class="brush: js notranslate">window.addEventListener("unload", function logData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/log", false); // tham số thứ 3 là `false` để gửi request bất đồng bộ
xhr.send(analyticsData);
});
</pre>
<p>Đây là những gì <code><strong>sendBeacon()</strong></code> thay thế. Với phương thức <code>sendBeacon()</code>, dữ liệu sẽ được gửi đi bất đồng bộ, User Agent (trình duyệt) có thể làm thế mà không tạo trễ khi tải lại trang hoặc chuyển đến trang tiếp theo. <strong>Điều này giải quyết tất cả vấn đề với việc gửi các dữ liệu phân tích:</strong></p>
<ul>
<li>Dữ liệu được gửi đi đáng tin cậy</li>
<li>Dữ liệu được gửi bất đồng bộ</li>
<li>Không ảnh hưởng đến việc tải trang tiếp theo</li>
<li>Hơn nữa, code đơn giản hơn so với tất cả các cách trước đây</li>
</ul>
<p>Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server sử dụng phương thức <code style="">sendBeacon()</code>.</p>
<pre class="brush: js notranslate">window.addEventListener("unload", function logData() {
navigator.sendBeacon("/log", analyticsData);
});
</pre>
<p>sendBeacon tạo 1 HTTP request với phương thức POST, kèm theo tất cả cookies liên quan khi được gọi.</p>
<h2 id="Tài_liệu_chi_tiết">Tài liệu chi tiết</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Tài liệu</th>
<th scope="col">Trạng thái</th>
<th scope="col">Bình luận</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Beacon', '#sendbeacon-method', 'sendBeacon()')}}</td>
<td>{{Spec2('Beacon')}}</td>
<td>Định nghĩa đầu tiên</td>
</tr>
</tbody>
</table>
<h2 id="Tương_thích_với_trình_duyệt">Tương thích với trình duyệt</h2>
<p>{{Compat("api.Navigator.sendBeacon")}}</p>
<h2 id="Xem_thêm">Xem thêm</h2>
<ul>
<li>{{domxref("navigator", "navigator")}}</li>
</ul>
|
