個別のAjax通信を監視するのではなく・・・
- APIコールのAjax完了時に特定の処理をしたい
- Ajax失敗時になにか処理をはさみたい
- グローバルにAjaxの完了・失敗を監視したい
こういう場面がありました。
それぞれ分かりやすい方法があったので、
jQuery Ajaxで通信完了・失敗を監視するやり方 を紹介
グローバルイベントを登録すれば監視できます。
全てのAjax完了時に特定の処理をさせたい場合
初めは次の場合などに有用な方法
- Rest APIコール後の後始末など
- 503などのメンテナンス時
例えばAjaxで特定Rest APIを呼び出した場合、個別のAjaxコールで後始末処理のコードを追加するのは大変です。というか現実的ではありません。
それからメンテナンス時はステータスコードとして503が返されますが、それが帰ってきたら「メンテナンス中です」みたいな画面を表示したいこともあるはず
そういう場合はajaxCompleteで監視できます。
▼ 全てのAjaxコール完了を監視するコード
|
1 2 3 4 5 6 7 8 9 10 11 |
/// 全てのAjaxに通信を監視する $(document).ajaxComplete(function(e, xhr, settings){ const url = settings.url; /// 通信対象のURL const status = xhr.status; /// 200, 503とかのステータス const statusText = xhr.statusText; /// ステータステキスト /// API呼出後の後始末など... }); |
このように $(document).ajaxComplete(function(){...}) とすれば通信完了時のグローバルイベントを監視することが可能です。そして settings.url から呼び出し先のURLも取得できます。
これを応用すれば次のようなことも可能
▼ 特定URLだけに完了後の処理を挟み込む
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/// 全てのAjaxに通信を監視する $(document).ajaxComplete(function(e, xhr, settings){ const url = settings.url; /// 通信対象のURL const status = xhr.status; /// 200, 503とかのステータス const statusText = xhr.statusText; /// ステータステキスト /// ▼ こんな感じにアレンジ if(url.includes('hogehoge.com/api')){ /// 特定APIの後始末コード } }); |
こういう感じで色々できます。
１つ注意なのは、サーバーダウンとかしてた場合ですね。そういった場合、ajaxComplete は発火しません。次に紹介する方法を使う必要があります。
Ajax失敗時・エラー時に特定処理をさせたい場合
お次はこういう場合について
- Ajaxエラーが出てしまった場合
- 呼出先サーバーがダウンしてる場合
そういう場合、個別のAjaxコールでエラー処理することもできますが・・・Ajaxエラーをグローバルイベントとして監視することもできます。
例えばこういうコードで監視できます
▼ 全てのAjaxエラーを監視するコード
|
1 2 3 4 5 6 7 8 9 10 11 |
/// Ajaxエラーをグローバルイベントで監視 $(document).ajaxError(function( event, xhr, settings, error ){ const url = settings.url; /// 通信対象のURL const status = xhr.status; /// 200, 503とかのステータス const statusText = xhr.statusText; /// ステータステキスト }); |
このように $(document).ajaxError(function(){...}) を使えばAjaxエラー（主にサーバーダウン時やAPI呼び出し失敗など）が起きたときの共通処理を挟み込めます。
これも中々便利なもので、settings.url の値で絞り込みをしたり、Ajaxエラーが出たら特定ページにリダイレクトさせたりとか使い方は様々ですね。
Ajax通信の完了・エラーを監視する方法まとめ
ということで簡単なまとめ
- 全Ajax完了時に特定の処理をはさむ場合
通信がエラーが出ずに完了したあとに特定の処理をしたい場合・・・例えば $(document).ajaxComplete(function(){...}) のようにグローバルイベントを監視できる
- Ajax失敗時・エラー時に特定処理をさせたい場合
通信がサーバーダウンなどでエラー発生した場合・・・例えば $(document).ajaxError(function(){...}) でグローバルイベントを監視して特定処理をはさむことができる
個別にコード追加しなくていいのが楽ですね。
というか特定処理をはさむなら↑2つの方法を使う方がいいです。
以上、Ajax通信のグローバルな監視でした。ではまた
