Ajaxをネスト(入れ子)にしてJSONを読み込む方法

ajax

前回はローカルファイル(json)を読み込み、jsonをパースするAjaxを紹介しました。
今回は前回と同じようにJSON形式のファイルを読み込み、パースします。前回との違いは、Ajaxをネスト(入れ子)にしてローカルファイルを2回読み込んでいます。
ajaxの入れ子は簡単ですがソースが読みにくくなります。今回紹介するソースをひな型として使って頂ければ幸いです。

[スポンサーリンク]

Ajaxのネスト(入れ子)のサンプルソースです

本体(json_read_nest.html)

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>AjaxでJSONファイルを読み込みパースします。</title>

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
            function() {

                // 1回目のajax
                $.ajax( {
                    url: 'sample_1.json',
                    dataType : 'json',
                    success: function( data ) {
                        var message = jsonParser(data);
                        // 1回目で読み込んだデータをHTMLへ出力しています。
                        $( '#sample-result1' ).html( message );

                            // 2回目のajax
                            $.ajax( {
                                url: 'sample_2.json',
                                dataType : 'json',
                                success: function( data ) {
                                    var message = jsonParser(data);
                                    // 2回目で読み込んだデータをHTMLへ出力しています。
                                    $( '#sample-result2' ).html( message );
                                }
                            } );
                    }
                } );
            }
        );
    } );

    /*
     * JSONデータをパースする関数です。
     */
     function jsonParser(data) {
         var message = data.code;
         message = message + '<br/>';
         message = message + data.message;
         return message;
     }
</script>

</head>


<!-- HTML部分 -->
<body>

<h1>AjaxでJSONファイルを読み込みパースします。</h1>
<p>Ajaxをネスト(入れ子)させて読み込んでいます。</p>

<p><input type="button" id="ajax-button" value="start" /> <br />
</p>
<div id="sample-result1"></div>
<br/>
<div id="sample-result2"></div>

</body>
</html>

1回目に読み込むファイル(sample_1.json)

{
    "code" : "1",
    "message" : "初回のajaxで読み込みます。"
}

2回目に読み込むファイル(sample_2.json)

{
    "code" : "2",
    "message" : "2回目のajaxで読み込みます。"
}

実行結果

ajax-nest1

解説

ソースが非常に読みにくいですね。。
読みにくいソースをよーく読んでいくと、ajax(1回目)のsuccessの中に、さらにajax(2回目)を書いていく方式でajaxの入れ子を実現しています。

ダウンロード

GitHubでサンプルソースを公開しています。こちらからご自由にダウンロードして下さい。

ブラウザについて

こちらで紹介するプログラムは、Chromeではエラーになります。Chromeの使用でajaxを使ってローカルファイルを読み込むことが出来ません。
IE、FireFox、Safariで動作確認を行っています。

さいごに

JavaScriptは、入れ子の状態になるとソースが非常に読みにくくなると思います。ajaxにしても同じことが言えます。
サンプルソースでは、ajax部分を関数化しませんでした。実際の実装では、ajax部分は関数化することをオススメします。(非常にわかりにくいので)
また、サンプルソースでは、errorを入れていません。errorを入れたら更に複雑となってしまうため入れませんでした。こちらも実際の実装では、error処理を入れることをオススメします。

1画面で、複数のAPIを呼ぶ場合にajaxのネスト(入れ子)はよく使います。
例えば、1つのテーブル内で、複数APIのデータを出力する場合など、ajaxのネスト(入れ子)を使うと、データが取得出来た順にテーブルへ描画するため非常にキレイな見栄えとなり喜ばれます。