Blare
avatar

送信専用(そうしんせんよう)Ajax

クライアントサイドのログをサーバーに送(おく)ったり、アナリティクスのデータを送(おく)ったり等(とう)でリクエストはするけどレスポンスは不要(ふよう)なAjaxを行(おこな)いたいときがあります。
通常(つうじょう)のAjaxは素(す)のJavascriptなら XMLHttpRequest だったり、ライブラリを使用(しよう)するなら jQuery.ajax() や axios を使(つか)うと思(おも)いますが、 送信専用(そうしんせんよう)のAjaxならもっと簡単(かんたん)に実装(じっそう)できるよという話(はなし)。

beacon

window.navigator オブジェクトに sendBeacon() という関数(かんすう)が実装(じっそう)されており、これを使(つか)うことで簡単(かんたん)にAjax送信(そうしん)を行(おこな)えます。 

navigator.sendBeacon('https://blare.fwhy.app/', {foo: 'FOO'});

注意点(ちゅういてん)としてはリクエストメソッドがPOST固定(こてい)となっていてGET等(とう)に変更(へんこう)はできなくなっています。

image

GETで送(おく)りたい場合(ばあい)は Image オブジェクトを使(つか)うことで実現(じつげん)できます。
Image オブジェクトはsrcプロパティを設定(せってい)したときにリクエストが送信(そうしん)されます。

(new Image()).src = 'https://blare.fwhy.app/?foo=FOO';

こちらも注意点(ちゅういてん)としては本来(ほんらい)は画像用(がぞうよう)のものなのでリクエストヘッダーが画像(がぞう)が前提(ぜんてい)のものとなっています。
例(たと)えばAcceptヘッダーが image/avif,image/webp,*/* のようになります。

参考(さんこう)

Navigator.sendBeacon()
Image()