3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

(JavaScript)ページの一部を動的に置き換える(prototype.js)

業務で久しぶりにWebを触ってます。自社HPのメンテなのですが、各ページのヘッダー(ナビゲーションメニューと会社ロゴ)とフッター(コピーライトとその他もろもろ)の変更にも簡単に対応できるように、それらを別ファイルとして保存しておきページ読み込み時に自動的にヘッダー、フッターファイルを読み込んで表示させるようにしたいと思いました。

JavaScriptでファイル読み込んでinnerHTMLで挿入すればいいだけなのですが、数年前にAjaxの開発で使った老舗ライブラリprototype.jsを使ってみました。
prototype.jsのバージョンは1.6.0.3です。

サーバ側にあるファイルを取得してクライアント側のHTMLページ内の指定の場所に表示するだけでれば、Ajax.Updateを使い非常に簡単にできます。

function IncludeHeadFooterFiles() {
  new Ajax.Updater(
                  { success: 'header' } ,
                  'header.html' ,
                  { method: 'get' ,  onFailure: displayError}
                  );
 
  new Ajax.Updater(
                  { success: 'footer' } ,
                  'footer.html' ,
                  { method: 'get' ,  onFailure: displayError}
                  );
}
 
function displayError(){
  alert("ファイルの取得に失敗しました");
}

あとはページのOnloadイベントに IncludeHeadFooterFiles() 関数をセットするだけでOKです。

ちなみにIE7でローカル上(webサーバを経由せず)にテストすると、うまく動きませんでした。
どうやらエクスプローラからHTMLをブラウザで見るとダメみたいです。
ちゃんとWEBサーバに配備してからhttp経由でテストしないといけないんですね。
Firefox3はローカル上からいけたんですが、IE7はやっぱ面倒です。

参考:ファイルの表示(Ajax.Updater)