スタートページ＞ Javascript＞ 外部ファイルの読込

Ajaxによる外部ファイルの非同期読込

Ajaxでの非同期読込の基本

基本文型

外部ファイルの読込の基本文型を示し、簡単な説明をします。

<script>
    function ファイル読込(ファイル名, 読込後処理名) {
        var ＸＭＬＨＲ = new XMLHttpRequest();                              // Ａ
        ＸＭＬＨＲ.onreadystatechange = function() {                        // Ｂ
            if (ＸＭＬＨＲ.readyState == 4 && ＸＭＬＨＲ.status==200) {     // Ｃ
                var 読込文 = ＸＭＬＨＲ.responseText;                       // Ｄ
                document.getElementById("表示場所").innerHTML = 読込文;     // Ｅ
            }
        }
        ＸＭＬＨＲ.open("GET", ファイル名, true);                           // Ｆ
        ＸＭＬＨＲ.send(null);                                              // Ｇ
    }
</script>

<p><input type="button" value="ＨＴＭＬファイル読込"
        onClick="ファイル読込()"></input><p>               <!-- Ｈ -->
<div id="表示場所"></div>                                  <!-- Ｉ -->
</script>

Ｈで［ＨＴＭＬファイル読込］ボタンをクリックすると、「ファイル読込()」が起動し、ファイルcalled/simple.htmlが読み込まれ、Ｆで加工された結果が、Ｉの「表示場所」に表示されます。

Ａ：var ＸＭＬＨＲ = new XMLHttpRequest();
XMLHttpRequest がＨＴＭＬと外部ファイルとのインタフェースになります。
「ＸＭＬファイルをＨＴＴＰで呼び出す（Requestする）」意味ですが、特にＸＭＬファイルに限定されません。
「ＸＭＬＨＲ」の名称は任意です。呼び出されたファイルに関係する情報が入ります。
Ｂ：ＸＭＬＨＲ.onreadystatechange
読込の状態が変わった（onreadystatechange）」ときの処理をＣ～Ｇで記述しています。
Ｃ：readyState==4、status==200
readyStateは、読込状態を示す変数で、読込中、正常終了、異常終了などがあり、正常終了のときは４になります。
Ｄ：ＸＭＬＨＲ.responseText
正常に読み込まれたら、ＸＭＬＨＲ.responseText に読み込まれた文が入ります。それを「読込文」とします。
Ｅ
読込後の処理を記述する部分です。ここでは単純に全文をＩの「表示場所」に表示します。
Ｆ：ＸＭＬＨＲ.open("GET", fileName, true);
単純にいえば「ファイルを非同期通信でオープンする」ことです。
Ｇ：ＸＭＬＨＲ.send(null)
「すべてのデータが読み込まれるまで読み込みを続けよ」の意味です（と思う？）。
onreadystatechangeは「読込の状態が変化したら～」の意味です。「読込中」「読込完了」「読込エラー」などの状態がありますが、正常に読込みが終了すると、readyStateが４になります。
Ｆ、Ｇは、Ａ～Ｅの後に記述しなければなりません。

実務的文型（パラメタ化）

上の基本文型では、「ファイル名」や「読込後処理」が「ファイル読込()」内に記述されているので、「ファイル読込()」が汎用性に欠けます。それで「ファイル名」や「読込後処理」を引数とし、「読込後処理」を任意の名称の別関数にしました。

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

    function ＨＴＭＬファイル表示(読込文) {                                   // Ｍ
        document.getElementById("表示場所").innerHTML = 読込文;
    }
</script>

<button onClick="ファイル読込('called/simple.html', 'ＨＴＭＬファイル表')">実行</button>  <!-- Ｎ -->
<div id="表示場所"></div>

「ファイル名」を引数にするのは簡単ですが、「読込後処理名」は関数なので、単純にＬを「読込後処理名(読込文); 」としたのでは「"ＨＴＭＬファイル表示"(読込文);」になってしまいます。
それを解決するために、Ｊで「読込後処理」が関数であることを宣言しておく必要があります。

Ｊの記述については、「Javascript での関数への引数渡し：関数名の引数」を参照してください。

実例

上の「実務的文型」による実例を示します。「ファイル読込()」はhead部に記述し（ここでのリストは省略）、２つのファイルを表示する関数をbody部に記述してあります。
　　ＨＴＭＬファイル表示()：called/simple.htmlをそのまま表示
　　プレーンテキストファイル表示()：called/simple.txtを、改行を考慮して表示

ＨＴＭＬファイル表示

<script>
    function ＨＴＭＬファイル表示(読込文) {
        document.getElementById("表示場所").innerHTML = 読込文;
    }
</script>

<button onClick="ファイル読込('called/simple.html', 'ＨＴＭＬファイル表示')">ＨＴＭＬファイル読込</button>
<div id="ＨＴＭＬファイル表示場所"></div>

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

ここに表示されます

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

プレーンファイル表示

<script>
    function プレーンファイル表示(読込文) {
        if (読込文.match(/\r/)) {  // 文中に「\r」があれば（サーバが Windows ならば）
  　　      読込文 = 読込文.replace(/\r\n/g, "<br />");　// 「\r\n」を<br />に置換
        }
        else {
            読込文 = 読込文.replace(/\n/g, "<br />");  　// 「\n」を<br />に置換
        }
        document.getElementById("プレーンファイル表示場所").innerHTML = 読込文;
    }
</script>

<button onClick="ファイル読込('called/simple.txt', 'プレーンファイル表示')"></button>
<div id="プレーンファイル表示場所"></div>

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

ここに表示されます

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