スタートページ> Javascript> 外部ファイルの読込
外部ファイルの読込の基本文型を示し、簡単な説明をします。
<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の「表示場所」に表示されます。
上の基本文型では、「ファイル名」や「読込後処理」が「ファイル読込()」内に記述されているので、「ファイル読込()」が汎用性に欠けます。それで「ファイル名」や「読込後処理」を引数とし、「読込後処理」を任意の名称の別関数にしました。
<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を、改行を考慮して表示
<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>
▼▼▼▼▼ ここから ▼▼▼▼▼
▲▲▲▲▲ ここまで ▲▲▲▲▲