XMLHttpRequestのリクエストをキャンセルする

XMLHttpRequestのリクエストを強制的にキャンセル

XMLHttpRequestオブジェクトによるAjaxでサーバーにリクエスト（要求）を送信した後、通信完了する前のタイミングでabortメソッドを実行すると読み込みを途中でキャンセルすることができます。

abortメソッドによるキャンセルがあるとイベントabortが発生します。
こちらのイベントの発生を検出することで、キャンセルが起こったときに指定した処理を実行することができます。

以下の例では、サーバーから「test.mov」を読み込むための通信をsendメソッドを実行して開始した直後に、あえてabortメソッドを実行してリクエストをキャンセルします。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // (1) リクエストの設定
  const xhr = new XMLHttpRequest();
  xhr.open('get', './test.mov', true);
  xhr.responseType = 'blob';

  // (2) リクエスト送信
  xhr.send();

  xhr.addEventListener('readystatechange', () => {

    // (3) リクエストをキャンセル
    xhr.abort();
  });

  // (4) リクエストのキャンセルを検知して処理を実行
  xhr.addEventListener('abort', () => {
    console.log("通信中止");
  });
});

abortメソッドを実行した後はイベントabortを検出してコンソールに「通信中止」と出力して通信を終了します。

また、abortメソッドによってリクエストをキャンセルした後にはイベントabortに続いてイベントloadendが発生します。
また、キャンセルした後のreadyStateプロパティの値は「0」になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。