スタートページ＞ Javascript＞ jQueryの基礎

jQueryによる外部ファイルの読込

jQueryを用いています。head部に　<script src="http://code.jquery.com/jquery-latest.js"></script< が必要です。

外部ファイルの読込・表示（ＨＴＭＬファイル）

重要！　例１～例４では、毎回クリックする前に「再読み込み」をしてください。先に行った結果が残るからです。

子ファイルをcalled/called1.htmlとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>.maroon {color:maroon}</style>        <!-- ア -->
<script>
function funcHead() {
    alert("called1.html head部script実行");  <!-- イ -->
}
</script>
</head>
<body>
<script>
function funcBody() {
    alert("called1.html body部script実行");  <!-- ウ -->
}
</script>
<style>.teal{color:teal}</style>             <!-- エ -->
<tagＡ>                                      <!-- オ -->
<p id="idＢ">カ <p id="idＢ"><br> 
<span class="maroon">キ　class="maroon"</span>
<span class="teal">ク　class="teal"</span>
<span class="red">ケ　class="red"</span>
</p>                                         <!-- コ -->
<h4 class="teal">サ　class="teal"</h4>
シ<button onClick="funcHead()">funcHead実行</button><br>
ス<button onClick="funcBody()">funcBody実行</button><br>
</tagＡ>                                     <!-- セ -->
<img src="120x80.jpg"><br>                   <!-- ソ -->
<img src="called/120x80.jpg">                <!-- タ -->
</body>
</html>

例１（関数Ａ）:子ファイルの全体を<div id="表示場所１"></div>に表示

<script>
function 関数Ａ() {
    $("#表示場所１").load("called/called1.html");
}   // ↑ 表示場所がidで指定されているので#をつける
</script>
<button onClick="関数Ａ()">関数Ａ()</button>
<div id="表示場所１"></div>
  • キはア、ク・サはエでの指定が反映されています。
  • ケ：redは子HTMLでは指定がなく、親HTMLのhead部のstyleでの指定が反映されています。
  • シはイ、スはウで定義されており実行されます（Internet Exprolor ではscriptは引き継がれないようです）。
  • ソ・タ：120x80.jpgは、子HTMLからは120x80.jpg、親HTMLからはcalled/120x80.jpgの相対位置にあります。
    親HTMLでの相対位置が有効になり、ソはエラーになりタが表示されます。

例２（関数Ｂ）：同上。ファイル名と表示場所の引数渡し

<script>
function 関数Ｂ(ファイル名, 表示場所) {
    $(表示場所).load(ファイル名);   // 表示場所は引数で#がついている。#表示場所ではエラーになる
}</script>
<button onClick="関数Ｂ('called/called1.html', '#表示場所２')">関数Ｂ()</button>
<div id="表示場所２"></div>

例３（関数Ｂ）：特定のタグ範囲だけの読込表示（<tagＡ> オ～セの部分）

ファイル名の後に、半角スペース＋タグ　の形式で範囲を指定します。
<div>や<p>のようなタグが使えます。
<html>のような利用者独自のタグも使えます（google Crome は不許可）。
<html>や<body>のようなタグは使えません。

 maroon（ア）、teal（エ）のclassは指定範囲外なので反映されません。
シ・スについても同様です。

ここをクリックする以前に例１などを実行していると、その結果が残っていて反映されてしまいます。

例４（関数Ｂ）：タグの多階層で指定した範囲だけの読込表示（<tagＡ>直下の<h4>　サの部分）

外部ファイルの読込・表示（テキストファイル .txt .csv など）

子ファイルをcalled/text.txtとします。

called/text.txt（UTF-8）の１行目です。

この上に空白行があり、これは３行目です。ここで改行しています。

例５（関数Ｂ）:関数Ｂによる子ファイル（called/text.txt）の<div>への表示


↓　<div id="表示場所５"></div>
改行が無視されます。

例６（関数Ｂ）:同上。表示場所を<pre>にする


↓　<pre id="表示場所６"></pre> 


改行が正しく反映されます。







読み込んだ内容を変数に格納して加工（$.ajax）


単に外部ファイルを表示するのではなく加工をしたい場合には、読み込んだ内容を変数に格納する必要があります。

それには、ajax（非同期通信）という方法を用います。jQueryでは、次のように記述します。


    $.ajax( {
        url: 'ファイル名',
        detaType: 'html'|'text',
        success: function( data ) { // 読み込まれた内容がdataに格納される
            // 正常に読み込まれたときの処理
        }
    ] )






例７（関数Ｃ）：テキストファイルを読み込んだ内容を各行に分解する


function 関数Ｃ() {
    $.ajax( {
        url: "called/text.txt",               // 取得ファイル指定
        detaType: "text",
        success: function( 読込文 ) {           // データ取得成功後の処理。読み込まれた内容が読込文に格納される
            var 行 = new Array();                   // ┐
            読込文 = 読込文.replace(/\r/g, "");     // ├　各行に分解する
            行 = 読込文.split("\n");                // ┘
            var 表示内容 = "";
            for (var i=0; i<行.length; i++) {
                表示内容 += 行[i] + "<br>";         // 各行にHTMLでの改行コードを付ける
            }
            $("#表示場所７").html(表示内容);        // HTMLとして表示する
        }
    });
}












改行が正しく反映されます。





例８（関数Ｄ）：同上。各行データに任意の加工をする


例７での加工をする部分を別関数とし、その関数を親ＨＴＭＬで記述して、関数名を引数で渡すようにしました。

その関数名を「関数Ｄ１」とすれば、関数Ｄ１(行) { ・・・ } が必要になります。


function 関数Ｄ(ファイル名, 処理関数) {
    $.ajax( {
        url: ファイル名,
        detaType: "text",
        success: function( 読込文 ) {
            var 行 = new Array();
            読込文 = 読込文.replace(/\r/g, "");
            行 = 読込文.split("\n");
            var 関数 = new Function('行', 'return ' + 処理関数 + '(行)');
            関数(行);　　　　　　　　　　　　　　 // 処理関数（行） が生成される
        }
    });
}

// 親ＨＴＭＬで記述する処理関数
function 関数Ｄ１(行) {
    行[0] = 行[0].replace(/１行目/, "先頭行");
    行[1] = "ここは空白行でした。";
    var 表示内容 = "";
    for (var i=0; i<行.length; i++) {
        表示内容 += 行[i] + "<br>";
    }
    $("#表示場所８").html(表示内容);
}

<button onClick="関数Ｄ('called/text.txt', '関数Ｄ１')">関数Ｄ);</button>












行[0]と行[1]の内容が変わりました。






例９（関数Ｅ）：ＨＴＭＬファイルを読み込みタグを変える


called/called1.htmlを読み込み、<tagＡ>の範囲の<h4>を<h2>に置き換え、<tagＡ>の範囲を表示します。


function 関数Ｅ() {
    $.ajax( {
        url: "called/called1.html",                  // 取得ファイル指定
        detaType: "html",
        success: function( 読込文 ) {                      // データ取得成功後の処理
            var 先頭位置 = 読込文.indexOf("<tagＡ>");            // ┐
            var 末尾位置 = 読込文.lastIndexOf("</tagＡ>") + 7;   // ├　<tagＡ>の範囲だけにする
            読込文 = 読込文.substring(先頭位置, 末尾位置);       // ┘
            読込文 = 読込文.replace(/h4/g, "h2");                // h4→h2
            $("#表示場所９").html(読込文);                       // 変更した内容を表示
        }
    });
}











例３と比較してください。

サが大きくなっています。

青字になっているのは親ファイルのｃｓｓの影響です。







例１０（関数Ｆ）：同上。変更処理の別関数化


例９と同じ処理を、例８のように、変更と表示を別関数で記述する形式にします。



function 関数Ｆ(ファイル名, 処理関数) {
    $.ajax( {
        url: ファイル名,
        detaType: "html",
        success: function(読込文) {
            var 関数 = new Function('引数', 'return ' + 処理関数 + '(引数)');
            関数(読込文);
        }
    });
}

function 関数Ｆ１(読込文) {
    var 先頭位置 = 読込文.indexOf("<tagＡ>");
    var 末尾位置 = 読込文.lastIndexOf("</tagＡ>") + 7;
    読込文 = 読込文.substring(先頭位置, 末尾位置); 
    読込文 = 読込文.replace(/h4/g, "h2");
    $("#表示場所１０").html(読込文);
}

<button onClick="関数Ｆ('called/called1.html', '関数Ｆ１')">関数Ｆ();</button>














改善課題


例９、例１０において、読込文の変更処理を正規表現での変更に頼っています。煩雑ですし複雑な処理を行うには不適切です。jQueryを用いた記述ができるのではないかと思うのですが、未解決のままになってます。