スタートページ＞ Javascript

prototypeの基礎

prototype.jsは、jQueryと同様のJavaScriptライブラリです。
prototype.は膨大な機能があるので、ここでは私が興味をもった、Ajax.UpdaterとAjax.Requestだけに限定してテストをしました。そのテスト結果の個人的メモです。

例１：Ajax.Updaterによる全体表示
例２：Ajax.Requstによる全体表示
例３：Ajax.Requestによる部分表示

prototype.jsの利用環境設定

Ajax.UpdaterとAjax.Request

子ファイルの相対指定等の問題

基本的に親ファイルの表示個所に、子ファイルをそのまま記述したのと同じなので、子ファイルの画像表示やHead部に記述したスクリプトは、親ファイルに表示したときにそれらが反映しなくなります。それに関しては、「Test」を参照してください。

例１：Ajax.Updaterによる全体表示

Ajax.Updaterは、子ファイルを読み込んで、親ファイルの任意の場所に表示する機能です。

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

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

<script type="text/javascript">
    function 例１(表示場所, 子ファイル名) {
        new Ajax.Updater(         // Ａ
            表示場所,             // Ｂ
            子ファイル名,
            { method: "get" }     // Ｃ
        );
    }
</script>

<input type="button" value="例１実行"
    onclick='例１("例１表示場所", "called/called1.html")'>
</input>
<div id="例１表示場所"></div>

例２：Ajax.Requestでの全体表示

例１：Ajax.Updaterによる全体表示と同じことを、Ajax.Request を使って行います。

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

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

<script type="text/javascript">
    function 例２(表示場所, 子ファイル名) {
        new Ajax.Request(                          // Ｄ
            子ファイル名,
            {
                method: "get", 
                onSuccess: function(読込情報) {     // Ｅ
                               例２読込後処理(表示場所, 読込情報.responseText);
                           }                        // Ｆ┘
            }
        );
    }

    function 例２読込後処理(表示場所, 読込文) {     // Ｇ
        $(表示場所).innerHTML = 読込文;             // Ｈ
    }
</script>

<input type="button" value="例２実行"
    onclick='例２("例２表示場所", "called/called1.html")'></input>
<div id="例２表示場所"></div>

例３：外部ファイルの部分表示

例２での「例２読込後処理」の部分を書き換えることにより、読み込んだ子ファイルの内容から特定の個所だけを表示したり、変更して表示することができます。
次の例では、文中に「h4」の文字列がある行だけを選択して表示しています。

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

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

<script type="text/javascript">
    function 例３(表示場所, 子ファイル名) {
        new Ajax.Request(
            子ファイル名,
            {
                method: "get", 
                onSuccess: function(読込情報) {
                               例３読込後処理(表示場所, 読込情報.responseText);
                           }
            }
        );
    }

    function 例３読込後処理(表示場所, 読込文) {
        var 行 = 読込文.split("\n");              // Ｉ
        var 表示内容 = "";
        for (var i = 0; i < 行.length; i++) {
            if (行[i].search(/h4/i) >= 0) {       // Ｊ
                表示内容 += 行[i];
            };
        };
        $(表示場所).innerHTML = 表示内容;
    }
</script>

<input type="button" value="例３実行"
    onclick='例３("例３表示場所", "called/called1.html")'></input>
<div id="例３表示場所"></div>