Ajax通信時にログを画面表示するデバッグ方法を紹介します

ajax

1つの画面で複数のAPIへ通信していると、どんな操作でAPIが呼ばれるのかがわかりにくくなってきます。
特に開発途中であれば、Ajaxのリクエストとレスポンスは常に表示しておいた方がバグの早期発見につながります。
alertをいれてデバッグする手法も多いと思いますが、alertをいれるとボタンクリックなど余計な動作が入ったり、alertウィンドウを閉じると出力している内容が消えたりと不便です。
今回は、画面上にAjaxのリクエストとレスポンスを表示する方法を紹介します。

[スポンサーリンク]

この章でやること

Clickボタンをクリックすると、Ajaxのリクエストとレスポンスを画面に出力します。
リクエストとレスポンスは、動的に変わるようにします。(Ajax通信が行われるごとに表示内容が変わります)
レスポンスの磯野一家は気にしないで下さい。

jquery-ajax-debug1

リクエスト・レスポンスを表示するHTMLソース

リクエスト、レスポンス、エラーを出力する部分を作成します。
4行目以下を画面下部分に入れておきましょう。

<h1>Ajaxのデバッグ</h1>
<p><input type="button" id="ajax-button" value="click" /> <br />

<hr>
<p>リクエスト</p>
<div id="request_url" ></div>
<div id="request_parameter" ></div>

<p>レスポンス</p>
<div id="response_parameter" ></div>

<p>エラー</p>
<div id="XMLHttpRequest" ></div>
<div id="textStatus" ></div>
<div id="errorThrown" ></div>

リクエスト・レスポンスを出力するJavaScriptソース

$( function() {
    $( '#ajax-button' ) .click(
    function() {
        var url = "http://localhost:8080/app/family";
        var requestParam = {test : '{"key":"val"}'};
        // デバッグ情報をクリアします。
        allClear();
        // リクエスト情報を出力します。
        requestDebug(url, requestParam);
        $.ajax({
          url: url,
          type:'GET',
          data: requestParam,
          dataType: 'jsonp',
          success: function(data) {
                       // レスポンス情報を出力します。
                       responseDebug(data);
                   },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                      // エラー情報を出力します。
                      errorDebug(XMLHttpRequest, textStatus, errorThrown)
                 }
        });
    });

    /*
     * デバッグ情報(リクエスト)を出力します。
     */
     function requestDebug(url, requestParam) {
         $( '#request_url' ).html("Request URL : " + url);
         $( '#request_parameter' ).html("Request Parameter : " + requestParam.test);
     }

     /*
      * デバッグ情報(レスポンス)を出力します。
      */
      function responseDebug(data) {
          $( '#response_parameter' ).html("Respons Data : " + data.responsData);
      }

      /*
       * デバッグ情報(エラー)を出力します。
       */
       function errorDebug(XMLHttpRequest, textStatus, errorThrown) {
           $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
           $("#textStatus").html("textStatus : " + textStatus);
           $("#errorThrown").html("errorThrown : " + errorThrown.message);
       }

    /*
     * デバッグ情報をクリアします。
     */
     function allClear() {
         $( '#request_url' ).empty();
         $( '#request_parameter' ).empty();
         $( '#response_parameter' ).empty();
         $( '#XMLHttpRequest' ).empty();
         $( '#textStatus' ).empty();
         $( '#errorThrown' ).empty();
     }
} );

実行結果

Clickボタンをクリックする前は何も表示されていません。

jquery-ajax-debug2

Clickボタンをクリックするとリクエスト・レスポンスのデータが表示されます。
Ajax通信に失敗すると「エラー」にエラー情報が出力されます。

jquery-ajax-debug1

解説

リクエストとレスポンスのデバッグ方法は、jQueryの「empty」と「html」を使ってリクエスト情報とレスポンス情報を出力しています。

Clickボタンがクリックされたタイミングで、「デバッグ情報を消す」処理と「リクエスト情報を出力する」処理を行います。
Ajax通信終了後に「レスポンス情報を出力する」処理を行います。

ダウンロード

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

さいごに

Ajaxのリクエストとレスポンスは、わざわざ画面に表示しなくてもデバッグツールを使えばみることができます。
例えば、「Live HTTP Headers」などのアドオンでも見ることが出来ます。
デバッグツールを使うよりは、最初から画面に表示していた方が楽だと思います。

注意事項で、リリース前には画面からデバッグ部分をけしましょう。
デバッグ用コードの削除は忘れがちになりやすいので、注意しましょう。

Ajaxから呼んでいるAPIは、自作のAPIです。
APIの作成方法は、こちら「jsonicを使ってrestfullなapiを実装する」で紹介しています。
レスポンスをもう少し考えればよかったと後悔しています。カツオ。。

それでは!