navigator.sendBeacon()

navigator.sendBeacon() - відправляє асинхронний POST запит.

Синтаксис:

navigator.sendBeacon(url, data);

Параметри:

navigator - об'єкт navigator.

url - рядок який містить URL адресу куди необхідно відправити запит. В url також можна вказувати дані для відправлення методом GET.

data - не обов'язково вказувати. Дані які необхідно передати, це може бути рядок, об'єкт Blob, FormData, ArrayBuffer.

Опис:

sendBeacon() метод об'єкта navigator який відправляє на сервер асинхронний запит POST.

Метод призначений для відправлення невеликих даних без очікування відповіді результату від сервера.

Метод повертає логічне значення: true - якщо браузер успішно поставив в чергу відправлення даних, в іншому випадку повертає false. І не повертає результат запиту від сервера як XMLHttpRequest.

Beacon API не чекає коли відправити запит, а просто додає в чергу запит а вже браузер відправляє запит на сервер коли буде можливість (прийде черга для відправлення).

Зазвичай метод sendBeacon() призначений для відправлення даних перед вивантаженням документу, завантаженням нової веб сторінки. Так як метод sendBeacon() додає в чергу відправлення браузера запит і при цьому не блокувати виконання коду. Це дає більше гарантії що процес відправлення даних на сервер не буде перерваний перезавантаженням сторінки і т.п.

Приклад:

var res=navigator.sendBeacon('/ajax.php', 'act=beacon&test=sendbeacon');

alert(res);

Відправленими даними є рядок з параметрам POST: var res=navigator.sendBeacon('/ajax.php', 'test=beacon'); //Content-type запиту "text/plain" Відправленими даними є об'єкт FormData:

var form=new FormData();
form.append('test', 'beacon');
navigator.sendBeacon('ajax.php', form); //Content-Type запиту "multipart/form-data"

Відправленими даними є об'єкт Blob:

var data= {test:'beacon'};
var blob=new Blob([JSON.stringify(data)], {type : 'application/json'});

navigator.sendBeacon('ajax.php', blob); //Content-Type запиту "application/json"

Відправленими даними є об'єкт URLSearchParams:

var params = new URLSearchParams({ test: 'beacon', p1: 2020 });
navigator.sendBeacon('ajax.php', params); //Content-type запиту "text/plain"

Приклад відправлення на сервер запиту скільки часу користувач мав відкритий веб-сайт (скільки часу перебував на сайті). Запит відправляємо коли корисувач покидає веб-сторінку і виникає подія onbeforeunload. Час перебування отримуємо за допомогою performance.now().

window.addEventListener('beforeunload', function(){
var data='time='+performance.now();
	navigator.sendBeacon('/ajax.php?act=beacon', data);
});