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

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


Ajaxでの非同期読込の基本

基本文型

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

<script>
    function ファイル読込(ファイル名, 読込後処理名) {
        var XMLHR = new XMLHttpRequest();                              // A
        XMLHR.onreadystatechange = function() {                        // B
            if (XMLHR.readyState == 4 && XMLHR.status==200) {     // C
                var 読込文 = XMLHR.responseText;                       // D
                document.getElementById("表示場所").innerHTML = 読込文;     // E
            }
        }
        XMLHR.open("GET", ファイル名, true);                           // F
        XMLHR.send(null);                                              // G
    }
</script>

<p><input type="button" value="HTMLファイル読込"
        onClick="ファイル読込()"></input><p>               <!-- H -->
<div id="表示場所"></div>                                  <!-- I -->
</script>

Hで[HTMLファイル読込]ボタンをクリックすると、「ファイル読込()」が起動し、ファイルcalled/simple.htmlが読み込まれ、Fで加工された結果が、Iの「表示場所」に表示されます。

A:var XMLHR = new XMLHttpRequest();
XMLHttpRequest がHTMLと外部ファイルとのインタフェースになります。
「XMLファイルをHTTPで呼び出す(Requestする)」意味ですが、特にXMLファイルに限定されません。
「XMLHR」の名称は任意です。呼び出されたファイルに関係する情報が入ります。
B:XMLHR.onreadystatechange
読込の状態が変わった(onreadystatechange)」ときの処理をC~Gで記述しています。
C:readyState==4、status==200
readyStateは、読込状態を示す変数で、読込中、正常終了、異常終了などがあり、正常終了のときは4になります。
D:XMLHR.responseText
正常に読み込まれたら、XMLHR.responseText に読み込まれた文が入ります。それを「読込文」とします。
読込後の処理を記述する部分です。ここでは単純に全文をIの「表示場所」に表示します。
F:XMLHR.open("GET", fileName, true);
単純にいえば「ファイルを非同期通信でオープンする」ことです。
G:XMLHR.send(null)
「すべてのデータが読み込まれるまで読み込みを続けよ」の意味です(と思う?)。
onreadystatechangeは「読込の状態が変化したら~」の意味です。「読込中」「読込完了」「読込エラー」などの状態がありますが、正常に読込みが終了すると、readyStateが4になります。
F、Gは、A~Eの後に記述しなければなりません。

実務的文型(パラメタ化)

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

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

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

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

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

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

実例

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

HTMLファイル表示

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

<button onClick="ファイル読込('called/simple.html', 'HTMLファイル表示')">HTMLファイル読込</button>
<div id="HTMLファイル表示場所"></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>

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

ここに表示されます

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