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

ajax

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

[スポンサーリンク]

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

存在しないパス(404エラー)に通信するスクリプトです。
jQuery1.8以上の場合はこちらのソースを使ってください。

<script type="text/javascript">
$( function() {
    $( '#ajax-button' ) .click(
    function() {
        $.ajax({
          url: 'http://localhost/api',
          type:'GET',
          dataType: 'jsonp',
        }).done(function(data) {
                       alert("ok");
                   })
          .fail(function(jqXHR, textStatus, errorThrown) {
                      $("#XMLHttpRequest").html("XMLHttpRequest : " + jqXHR.status);
                      $("#textStatus").html("textStatus : " + textStatus);
                      $("#errorThrown").html("errorThrown : " + errorThrown);
                 })
          .always(function() {
                       alert("finishi");
                 })
    });
} );
</script>

こちらはjQuery1.4以前の古いjQueryの場合はこちらのロジックを使ってください。

<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でサンプルソースを公開しています。こちらからご自由にダウンロードして下さい。

解説その1

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

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

追筆

jQuery3から「success、error、complete」が廃止されたので、ソースコードを修正しました。
以下公式ページからの引用

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

さいごに

開発中にAjax(javascript)側のエラーなのかサーバサイド側のエラーなのかしっかりと切り分けることで開発スピードもあがると思います。
Ajax通信でつまずいたらまずはエラー情報を確認するようにしてみましょう!

それでは!