JavaScript

レシピ

Ajax

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

XMLHttpRequestによるリクエスト(要求)を途中で強制的に取り消す方法について解説します。

この記事のポイント

  • Ajaxで送信したリクエスト(要求)をキャンセルするときはabortメソッドを実行する
  • abortメソッドを実行するとイベントabortが発生する

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」になります。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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