Ajax 通信を任意のタイミングで中断する方法と、そのとき注意することの話

JavaScript jQuery

jQuery の $.ajax を用いた Ajax 通信処理を実装していると、「リクエストした Ajax 通信を中断したい」というストーリーに遭遇することがある。 こういうときは $.ajax が返却する jqXHR オブジェクト を変数に取得しておき、その中にある abort メソッドを叩いてあげることで Ajax 通信の中断を実現することができる。

jqXHR.readyState の値を見て abort するべきか否かを判定するとよりベターだろう。 readyState は 0～4 の値を取る。

値 説明
0 オブジェクトが生成された
1 サーバとの接続を確立
2 リクエストを送信している
3 レスポンスを取得中
4 レスポンスの取得完了（処理可能）

なので、「0より大きく4より小さいならば」というときに abort を叩いてあげるといい。

中断時に注意すること

ところで $.ajax のコードにはレスポンスがエラーだった場合のコールバック関数 fail をメソッドチェーンにして宣言することができる。 fail はレスポンスのエラー発生時だけでなく、abort を叩くことによる中断時にも呼ばれることになる。 ただし、このとき引数で取得できる jqXHR オブジェクト の statusText と textStatus には abort という文字列が格納される。

このことから、中断時は fail の中で何もしたくないなら以下のように定義するといいだろう。

$.ajax({
    // something
}).fail(function(jqXHR, textStatus) {
    if (textStatus === 'abort') { return; }
    // for error code
});

参考

api.jquery.com