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

ＸＭＬファイルの読込

外部ファイルから配列データを読み込む最も標準的な方法は、配列データをＸＭＬで記述することです。

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

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

    function 表示クリア(表示場所) {
        document.getElementById(表示場所).innerHTML = "";
    }
</script>

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

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

<?xml version="1.0" encoding="utf-8"?>
<学生表>
  <学生>
    <番号>123456</番号>  <氏名>鈴木太郎</氏名>  <学部>工学部</学部>
  </学生>
  <学生>
    <番号>987654</番号>  <氏名>佐藤花子</氏名>  <学部>文学部</学部>
  </学生>
  <学生>
    <番号>111111</番号>  <氏名>佐藤二郎</氏名>  <学部>文学部</学部>
  </学生>
</学生表>

全体の流れ

ＥによりＸＭＬ子ファイル（called/callled.xml）が「ファイル読込」により読み込まれた「読込文」が、Ａにより「学生表」として「ＸＭＬ表示」関数に引き渡されます。 「ＸＭＬ表示」では、「学生表」を「学生番号[]」などの通常の配列にして表示します。

<script>
    function ＸＭＬ表示(学生表) {                          // Ａ
        var 学生番号 = new Array();                        // Ｂ
        var 学生氏名 = new Array();
        var 学生学部 = new Array();

        var 学生 = 学生表.getElementsByTagName("学生");    // Ｃ
        var 番号 = 学生表.getElementsByTagName("番号");
        var 氏名 = 学生表.getElementsByTagName("氏名");
        var 学部 = 学生表.getElementsByTagName("学部");

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

        var 表示内容 = "学生数=" + 学生数 + "<br>";
        for (i = 0; i < 学生数; i++) {
            表示内容 +=  "学生番号" + i + "]=" + 学生番号[i]
                     + "　学生氏名" + i + "]=" + 学生氏名[i]
                     + "　学生学部" + i + "]=" + 学生学部[i] + "<br>";
        }
        document.getElementById("表示場所").innerHTML = 表示内容;
    }
</script>

<button onClick="ファイル読込('called/called.xml', 'ＸＭＬ表示')">表示</button> <!-- Ｅ -->

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

ここに表示されます

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