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

外部HTML読込での留意点

XMLHttpRequest-responseTextにより読み込まれる外部ファイル(called/called2.html)を子ファイル、読み込むファイル(このページ)を親ファイルといいます。
子ファイルを独立して開き、それと次の表示結果を比較してください。

なお、各種の外部読込方法での結果一覧は「外部ファイル表示での問題」にあります。


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

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

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


例1:全体表示

このページでの表示結果と、子ファイルを独立に開いた画面を比較してください。

<script>
    function 全体表示(読込文) {
        document.getElementById("全体表示場所").innerHTML = 読込文;
    }
</script>

<button onClick="ファイル読込('called/called2.html', '全体表示')">全体表示</input>

クリック前にこのページの再読み込みをしてください。

▼▼▼▼▼ ここから子ファイル ▼▼▼▼▼

▲▲▲▲▲ ここまで子ファイル ▲▲▲▲▲

以下は親ファイルに記述した文です。クリックの前後での変化に注意してください

K:<p>子ファイルのhead部で設定した<span class="iroGreen">green</span>です</p>

L:<p>子ファイルの外部JSで指定した<span class="iroBlue">blue</span>()</p>

M:<p>子ファイルのインラインでの関数<button onClick="インライン関数()"> </button>です。</p>

N:<p>子ファイルのhead部の関数<button onClick="子ファイルhead部関数()"> </button>です。</p>

O:<p>子ファイルの外部JSの関数<button onClick="子ファイル外部JS関数()"> </button>です。</p>

▲▲▲▲▲ 確認データここまで ▲▲▲▲▲


部分(Body部のみ)表示

<script type="text/javascript">
    function 部分表示(読込文) {
        var 読込文 = 読込文.replace(/[\n\r]/g, "");    // 「改行コード」を削除
        var 抜出文 = 読込文.match("<body>.*</body>","i");   // body部だけを抜き出す
        document.getElementById("部分表示場所").innerHTML = 抜出文;
    }
</script>

<button onClick="ファイル読込('called/called2.html', '部分表示')">部分表示</button>

クリック前にこのページの再読み込みをしてください。

▼▼▼▼▼ ここから子ファイル ▼▼▼▼▼

▲▲▲▲▲ ここまで子ファイル ▲▲▲▲▲

以下は親ファイルに記述した文です。クリックの前後での変化に注意してください

K:<p>子ファイルのhead部で設定した<span class="iroGreen">green</span>です</p>

L:<p>子ファイルの外部JSで指定した<span class="iroBlue">blue</span>()</p>

M:<p>子ファイルのインラインでの関数<button onClick="インライン関数()"> </button>です。</p>

N:<p>子ファイルのhead部の関数<button onClick="子ファイルhead部関数()"> </button>です。</p>

O:<p>子ファイルの外部JSの関数<button onClick="子ファイル外部JS関数()"> </button>です。</p>

▲▲▲▲▲ 確認データここまで ▲▲▲▲▲


結果の検討

基本的に、親ファイルの指定個所に子ファイルをそのまま記述したことになります。
それは、Ajax.Updater、Ajax.Requestともに同じであり、全文表示のとき、両者の結果は全く同じです。

相対指定

スタイル

スクリプト

親ファイルとの関連

親ファイルと子ファイルで同じ名称の設定がある場合、どちらが優先するかが問題になります。ここでは、親ファイルのHead部に、スタイル iro.Green {color: orange}とスクリプト「子ファイルhead部関数」があります。