とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

JavaScript で HTTP 通信

XMLHttpRequest(XHR)

developer.mozilla.org

  • JavaScript で HTTP 通信をする際に使用する API
  • ページ全体を再読込することなく Web ページの一部を更新することができるため Ajax プログラミングで使われる

使い方

const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.send();

レスポンス受け取り

  • XHR イベントの監視には addEventListener() を使用する

developer.mozilla.org

  • イベントタイプには load を指定する
const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.addEventListener('load', (event) => {
  console.log(event.target.status);
});
request.send();
  • エラーハンドリングにはイベントタイプに error を指定する
    • あくまで HTTP 通信のエラーハンドリングに使用するのであり、 API コールのエラーステータスを拾うには load 内でおこなう
const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.addEventListener('load', (event) => {
  console.log(event.target.status);
});
request.addEventListener('error', () => {
  console.log('通信エラー');
});
request.send();