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

配列データの読込（プレーンテキスト）

２次元配列のデータをもつｔｘｔファイルやＣＳＶファイル（子ファイル）を読み込み、行列[i][2] の形式にします。
ここでは、文字列の加工が重要なので、「正規表現」を参照してください。

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

<script>
    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/plain1.txt）の内容を示します。

123456,鈴木太郎,工学部
987654,佐藤花子,文学部
111111,佐藤二郎　　　　　　（学部が欠けています）

子ファイルを読み込んで、
　　行列[0][1] = "鈴木太郎", 行列[1][0] = 987654
となるような２次元配列「行列」を作成して表示します。

<script type="text/javascript">
    function 例１(読込文) {
        var 行列 = new Array();

        if (読込文.match(/\r/)) var 行 = 読込文.split("\r\n");  // Ａ
        else                        行 = 読込文.split("\n");

        var 行数 = 行.length;
        for (var i = 0; i < 行数; i++) {
            行列[i] = new Array();                              // Ｂ
        }

        var 最大列数 = 0;
        for (i = 0; i < 行数; i++) {
            var 列 = 行[i].split(",");                          // Ｃ
            var 列数 = 列.length;
            for (var j = 0; j < 列数; j++) {
                行列[i][j] = 列[j];                             // Ｄ
            }
            if (列数 > 最大列数) 最大列数 = 列数;               // Ｅ
        }

        var 表示内容 = "";
        for (i = 0; i < 行数; i++) {
            for (j = 0; j < 列数; j++) {
                表示内容 +=  "行列[" + i + "][" + j + "]=" + 行列[i][j] + ", ";
            }
            表示内容 +=  "<br>";
        }
        document.getElementById("例１表示場所").innerHTML = 表示内容;
    }
</script>

<p><input type="button" value="例１表示"
    onClick="ファイル読込('called/plain1.txt', '例１')"></input></p>
<div id="例１表示場所"></div>

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

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

例２：空白行や行内空白があるとき

子ファイル（called/plain2.txt）の内容
（_ は半角の空白、□は全角の空白です）

123456,鈴木太郎,工学部
987654,_□佐藤花子□,__文学部□□
□_　　（空白行）
111111,佐藤二郎
   　　（空白行）

プレーンテキストでは、かなり雑な記述になりがちです。ここでは、次の規則にしました。

<script type="text/javascript">
    function 例２(読込文) {
        var 行列 = new Array();

        if (読込文.match(/\r/)) var 見掛行 = 読込文.split("\r\n");  // Ｆ
        else                        見掛行 = 読込文.split("\n");

        var 見掛行数 = 見掛行.length;
        for (var i = 0; i < 見掛行数; i++) {
            行列[i] = new Array();
        }

        var 有効行数 = 0;
        var 最大列数 = 0;
        for (i = 0; i < 見掛行数; i++) {
            見掛行[i] = 見掛行[i].replace(/\s/g, ""); 　　　// Ｇ
            見掛行[i] = 見掛行[i].replace(/　/g, "");
            if (見掛行[i] != "") {                          // Ｈ
                var 列 = 見掛行[i].split(","); 
                var 列数 = 列.length;
                for (var j = 0; j < 列数; j++) {
                    行列[有効行数][j] = 列[j];
                }
                if (列数 > 最大列数) 最大列数 = 列数;
                有効行数 = 有効行数 + 1;                    // Ｉ
            }
        }

        var 表示内容 = "";
        for (i = 0; i < 有効行数; i++) {
            for (j = 0; j < 最大列数; j++) {
                表示内容 +=  "行列[" + i + "][" + j + "]=" + 行列[i][j] + "　";
            }
            表示内容 +=  "<br>";
        }
        document.getElementById("例２表示場所").innerHTML = 表示内容;
    }
</script>

<p><input type="button" value="例２表示"
    onClick="ファイル読込('called/plain2.txt', '例２')"></input></p>
<div id="例２表示場所"></div>

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

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

例３：タイトル行があるとき（ＣＳＶファイル）

Excelなど表計算ソフトのデータをプレーンテキストで記録する形式に、ＣＳＶがあります。図のExcelデータを、「ＣＳＶ（カンマ区切り）」で保存すると、ＣＳＶファイルの内容（called/plain3.csv）は次のようになります。

文学部 
番号,氏名,学部
123456,鈴木太郎,工学部
987654,佐藤花子,文学部
111111,佐藤二郎,　　（空白セルがあるとき「,」が付く）
　　　　　　　　　　（最後に空白行がある）

例１とほぼ同じですが、先頭行をタイトル行として、次のようにしたいのです。
　　行列["番号"][0] = 123456　行列["氏名"][0] = "鈴木太郎"　行列["学部"][0] = "工学部"
　　行列["番号"][1] = 987654　行列["氏名"][1] = "佐藤花子"　行列["学部"][1] = "文学部"
　　行列["番号"][2] = 111111　行列["氏名"][2] = "佐藤二郎"
（このように、添字が自然数ではなく文字列である配列を連想配列といいます。）

<script type="text/javascript">
    function 例３(読込文) {
        var 行列 = new Array();

        if (読込文.match(/\r/)) var 行 = 読込文.split("\r\n");
        else                        行 = 読込文.split("\n");

        var 行数 = 行.length;

        var タイトル名 = 行[0].split(",");         // Ｊ
        var 列数 = タイトル名.length;
        for (var j = 0; j < 列数; j++) {
            行列[タイトル名[j]] = new Array();     // Ｋ
        }

        for (i = 1; i < 行数-1; i++) {            // Ｌ
            列 = 行[i].split(",");
            for (j = 0; j < 列数; j++) {
                行列[タイトル名[j]][i-1] = 列[j];  // Ｍ
            }
        }
        行数 = 行数 - 2;                           // Ｎ


        var 表示内容 = "例示<br>"
                     + "　行列['番号'][0]=" + 行列['番号'][0] + "<br>"
                     + "　行列['氏名'][1]=" + 行列['氏名'][1] + "<br>";
        表示内容 +="一覧表<br>";
        for (i = 0; i < 行数; i++) {
            for (j = 0; j < 列数; j++) {
                表示内容 +=  "行列['"+ タイトル名[j] + "'][" + i + "]="
                            + 行列[タイトル名[j]][i] + "　";
            }
            表示内容 +=  "<br>";
        }
        document.getElementById("例３表示場所").innerHTML = 表示内容;
    }
</script>

<p><input type="button" value="例３表示"
    onClick="ファイル読込('called/plain3.csv', '例３')"></input></p>
<div id="例３表示場所"></div>

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

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

結果の「例示」でみるように、２次元の連想配列の形式で読み込まれました。
欠陥値（行列['学部'][2]）はundefinedではなくnullになります。それは「佐藤二郎,」の「,」があるからです。