スタートページ＞ Javascript＞ 外部ファイルの読込＞ Ajaxによる非同期読込

ＪＳＯＮファイルの読込

ＪＳＯＮ形式とは、配列を簡単に記述できる形式です。
ＪＳＯＮ形式のファイルはJavaScript以外にもCやC++、Java、Perlなどでも取り扱えるので、データ交換フォーマットとして広く使われています。
同様なものにＸＭＬがありますが、ＪＳＯＮのほうがシンプルです。

（前提）このページのhead部に次のスクリプトが記述されています。

<script type="text/javascript">
    function ファイル読込(ファイル名, 読込後処理名) {
        var ＸＭＬＨＲ = new XMLHttpRequest();
        ＸＭＬＨＲ.onreadystatechange = function() {
            if (ＸＭＬＨＲ.readyState == 4 && ＸＭＬＨＲ.status==200) {
                var 読込文 = ＸＭＬＨＲ.responseText;
                var 読込後処理
                      =  new Function("引数", "return " + 読込後処理名 + "(引数)");    
                読込後処理(読込文);
            }
        }
        ＸＭＬＨＲ.open("GET", ファイル名, true);
        ＸＭＬＨＲ.send(null);
    }
</script>

<input type="button" value="読込" onClick="ファイル読込('aaa.html', '表示処理')"></input>
とすると、aaa.html の全文が文字列変数「読込文」を引数として関数「表示処理(読込文) { …… } 」が起動されます。
なお、読み込まれるファイル（aaa.html）を子ファイル、読み込むファイル（このページ）を親ファイルといいます。どちらも文字コード UTF-8 で記述されているものとします。

ＪＳＯＮファイルの形式と例示

ＪＳＯＮでの最も単純な一般形式は、次のような形式で記述します。
　｛　｝や［　］、「，」の有無に留意してください。
ＪＳＯＮの文法は厳しく、誤りがあると何も表示されません。

子ファイル（called/called-json.json）の内容

{ "学生": [
     { "番号": "123456",  "氏名": "鈴木太郎",
                                  "学部": "工学部" }, 
     { "番号": "987654",  "氏名":
                     "佐藤花子",  "学部": "文学部" },
     { "番号": "111111",  "氏名": "佐藤二郎" }
  ]
}

読込と配列化

<script>
    function ＪＳＯＮ表示(読込文) {
        var 学生番号 = new Array();             // Ａ
        var 学生氏名 = new Array();
        var 学生学部 = new Array();

        読込文 = 読込文.replace(/[\n\r]/g,"");  // Ｂ
        var 学生表 = eval("(" + 読込文 + ")");  // Ｃ

        var 学生数 = 学生表.学生.length;
        for (var i = 0; i < 学生数; i++) {
            学生番号[i] = 学生表.学生[i].番号;  // Ｄ
            学生氏名[i] = 学生表.学生[i].氏名;
            学生学部[i] = 学生表.学生[i].学部;
        }

        var 表示内容 = "学生数=" + 学生数 + "<br>";
        for (i = 0; i < 学生数; i++) {
            表示内容 += "学生番号[" + i + "] = " + 学生番号[i] 
                     + "　学生氏名[" + i + "] = " + 学生氏名[i]
                     + "　学生学部[" + i + "] = " + 学生学部[i] + "<br>";
        }
        document.getElementById('表示場所').innerHTML = 表示内容;
    }
</script>
<p><input type="button" value="表示"
    onClick="ファイル読込('called/called-json.json', 'ＪＳＯＮ表示')"></input></p>

▼▼▼▼▼ ここから ▼▼▼▼▼

ここに表示されます

▲▲▲▲▲ ここまで ▲▲▲▲▲