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

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