送信専用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,*/* のようになります。