(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)