Ajaxの通信エラー情報を表示する方法

ajax

HTTP通信でエラーになったのか、サーバサイドでエラーになったのか、原因を切り分けをしていくには、エラー情報をきちんと取ることからはじまると思います。
Ajaxを使い始めたころは、HTTP通信のエラー情報の取得がうまくいかなくて試行錯誤していました。
今回は非同期通信中にエラーが発生した時のエラー情報参照方法について解説します。

[スポンサーリンク]

Ajaxの通信エラー情報を表示するコード

存在しないパス(404.html)に通信するスクリプトです。


<script type="text/javascript">
$( function() {
  $( '#ajax-button' ) .click(
  function() {
    $.ajax({
      url: '404.html',
      type:'GET',
      dataType: 'jsonp',
      success: function(data) {
             alert("ok");
           },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
            $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
            $("#textStatus").html("textStatus : " + textStatus);
            $("#errorThrown").html("errorThrown : " + errorThrown.message);
         },
      complete : function(data) {
             alert("finishi");
         }
    });
  });
} );
</script>

ダウンロード

GitHubでサンプルソースを公開しています。こちらからご自由にダウンロードして下さい。
WebContent > json_read.html で動作確認出来ます。

実行結果

IEでHTMLファイルを実行します。
chromeではエラー内容が違ってきます。これはchromeの仕様です。

jquery-ajax-error1

解説その1

エラー時の振舞で、3つの値が取得できます。
error: function(XMLHttpRequest, textStatus, errorThrown)

「XMLHttpRequest.status」は、HTTPステータスが取得出来ます。
「textStatus」は、エラー情報(timeout、error、parsererror等の文字列)が取得出来ます。
「errorThrown.message」は、例外情報が取得出来ます。

「XMLHttpRequest.status」で、404が表示されそうなものですが、実際は0が却ってきていますね。
サンプルソースでは、ローカルのファイルを参照しにいっているため、HTTPステータスが0になっています。

さいごに

Ajaxの通信エラーの詳細情報は、通常画面には出さないと思います。
開発時は、エラー詳細情報が取れたほうが格段に楽になります。
ただ、Ajaxの通信エラーって少々雑で分かりにくいような気もします。。( ̄‥ ̄)=3

開発中は、「あれ通信がおかしいかな?」と思ったら実はサーバサイドプログラムのバグだったり、その逆もよくあります。(ノ△・。)
Ajaxのエラー情報をきちんと取ることで開発も楽になることを祈ります!
それでは!