こんにちは。
はけです。

WEB開発7年目です。

ところでみなさんはこんなことってないでしょうか。

  • ajax処理中に画面遷移するとなぜかエラーが発生してしまう！
  • ajax処理中に画面遷移したときのエラーの解決方法がわからない！

WEB画面を開発しているとたまに出会う悩みだと思います。

今回の記事では、この「ajax処理中に画面遷移するとエラーになる現象の解決方法」について解説します。

私も、ajax処理を行っている最中に画面遷移を行いたいと思い、実際につくって動かしてみましたがなぜかエラーになってしまいます。

GOOGLE先生に聞きながら試行錯誤して、なんとかajax処理中の画面遷移をエラー発生させずに行うことができました！

もし、同じ悩みの方は詳しくわかりやすく解説していますので、参考にしてください。

jQueryのajax処理中に画面遷移するとエラーになる現象の解決方法

今回の目標としては、
「jQueryのajax処理(非同期処理)中に画面遷移を行った場合に、エラー処理が行われないようにすること」
となります。

よくある次のjQueryのajax処理でいうと、Ajax通信で「hello.php」の処理を呼び出し、レスポンスの受付待ち状態中に画面側で別のボタンを押して画面遷移しようとしたときに「.fail(function() {」が動作してしまい、「error」のポップアップが出てしまいます。

$('#btnsend').on('click', function(){
  // Ajax通信実行
  $.ajax({
    url: 'hello.php',
    type: 'GET',
    dataType: 'json',
    data: data,
    timeout: 5000,
  })
  .done(function(data) {
      // 通信成功時の処理
      alert('success');
  })
  .fail(function() {
      // 通信失敗時の処理
      alert('error');
  });
})

ここでは、画面の操作を優先して「error」のポップアップを出さずに画面遷移ができるようにしていきます。

実行環境

  • jquery 3.5.1
  • GoogleChrome 87.0.4280.88

結論

先に解決策の結論をお伝えします。

次の2つのコードを埋め込むことで実現できます。

1つ目のコードでajax処理中に画面遷移を行った場合、ajax処理をabort(中断)するように設定します。

2つ目のコードで失敗処理内で、abort(中断)であれば失敗処理(.fail内の処理)を行わず処理を終了するようにします。

こうすることで、ajax処理中に画面遷移を行ったとしても、失敗処理を行わずに画面遷移をすることができます。

$(document).bind("ajaxSend", function(c, xhr) {
        $(window).bind( 'beforeunload', function() {
                xhr.abort();
        })
});
$('#btnsend').on('click', function(){
  // Ajax通信を開始
  $.ajax({
…
// 失敗
.fail(function() {
        if (data['statusText'] === 'abort') {★追加
                return;　　　　　　　　　　　　★追加
        }　　　　　　　　　　　　　　　　　　　★追加
      // 通信失敗時の処理
      alert('error');
})

解決方法の詳細を確認する

次に解決方法の細かい部分を解説しておきます。

abort処理を組み込む前と後で次のようにHTTPレスポンスが変わります。

  • abort処理組み込み前
    • HTTPステータス：0(レスポンスなし)
    • readyState ：0(UNSENT)
    • statusText：error(エラー)
  • abort処理組み込み後
    • HTTPステータス：0(レスポンスなし)
    • readyState ：0(UNSENT)
    • statusText：abort(中断)

HTTPレスポンスとはajax処理の成功/失敗などの結果が設定される場所で、jQueryもHTTPレスポンスを見て成功失敗などを判断します。

このようなHTTPレスポンスの変化を利用して、明示的に中断(abort)された場合は失敗処理を行わないようにすることができます。（結論部分のコード参照）

まとめ

今回はjQueryのajax処理中に画面遷移するとエラーになる現象の解決方法について解説しました。

結論としては次の２つの処理をソースに組み込むことで回避できることを解説しました。

  • ajax処理中に画面遷移を行った場合、abort(中断)を行う
  • abort(中断)であれば失敗処理を行わない

なお、解決方法の詳細として、abort(中断)を行った際のHTTPレスポンスのステータスの内容を確認しました。

みなさんも無事解決できたでしょうか。

以上、これからもWEB開発でつまずいたことや役に立つ情報を配信していきます。

お気に入り登録をお願いします！