Ajax入門(通信エラーとなった原因の取得)

以前、Jqueryを使ったAjaxについての記事をエントリーしました。

前回の記事では「入門」ということもあって、エラー処理についての内容は省略しました。

サンプルスクリプトを実行しても、「ファイルの取得に失敗しました」としか表示されません。

これだと、エラーの原因を特定することができませんので、デバッグ作業のときに困ってしまいます。

今回はAjax通信エラーの原因を取得する記事をエントリーします。

 

エラーの原因を取得する方法

ajaxが成功・失敗した場合の分岐は done 、fail で分岐しました。(※jQuery1.6以上)

done 通信に成功
fail 通信に失敗
always fail を含め処理が完了したときに起動

エラー原因の取得は fail() の引数に以下の内容を入れることで取得できます。

jqXHR
HTTPリクエストのステータスが取得できます
textStatus
タイムアウト、パースエラー(構文エラー)などのエラー情報が取得できます
errorThrown
例外情報が取得できます

前回 のサンプルスクリプトを以下のように記述するとエラーの原因を取得することができます。


ポイント

上記のコードでは、ajax通信エラー以外にも読み込むURLや結果もコンソールログに取得しています。コンソールログの使い方は以下をご参考ください。

 

エラーのサンプル

ajax通信のエラーをコンソールログで表示することで以下の問題を切り分けることができます。

  • そもそもリクエストが飛んでいない
  • PHPがリクエストに対してエラーとなっている
  • リクエストに入る値が全くの予想外

そもそもリクエストが飛んでいない

存在しないページにajax通信を行うと、コンソールログに次のように表示されます。

(※コンソールログの確認は Chrome のデベロッパーツールで行います)

jqXHR 404
textStatus error
errorThrown undefine

このケースでは通信先のURLを確認する必要があります。

 

通信先のページで内部エラー

jqXHR 500
textStatus error
errorThrown undefine

このケースでは通信先のファイル(PHP)を見直す必要があります。

 

リクエストに入る値が全くの予想外

ajaxでの設定に不備がある場合は以下のエラー内容となります。

jqXHR 200
textStatus parseerror
errorThrown Unexpected token < in JSON at position 0

このケースでは、ajaxのコードを見直す必要があります。

 
以上です。

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。メールはこちら

 

-周辺知識