ホームページを作成に関する備忘録
ajaxで、外部ファイルを読み込んでメニューを表示する方法
Xhtmlファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページ作成備忘録</title>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
function load_file(divName,fileURL){
$("#"+divName).load(fileURL);
}
</script>
<script type="text/javascript">
$(function(){
load_file("hpmethoc" ,"hpmethod_menu.txt" );
});
</script>
</head>
<body>
<div id="hpmethod"></div>
</body>
</html>
外部ファイル（hpmethod_menu.txt
メニューの内容を更新しやすいように外部ファイルにする
まず、読み込む外部ファイルを作ります。ここでは、hpmethod.txtという名前のファイルを作りました。このファイルの中身が、上のhtmlファイルの<div id="hpmethod"></div>のところに読み込まれていくようになっています。ファイルの中身はこのページのメニューの部分の内容です。このように、メニューの中身を外部ファイルにして読み込むと、項目が増えた時にすべてのファイルのメニュー部分を直す必要が無くなり、１つのファイルを訂正すればそれで完成です。「いきもの」内の「授業の部屋」や「顕微鏡の部屋」、この「HP備忘録」のメニューはファイルの数も多いのでこの方法を使っています。
どうやって読み込むのか？
ここでは、jQueryを使います。この関数の中にload()関数があるのでそれを用います。ここで、<div id="hpmethod"></div>のように何も入っていないものを作ります。そして、この中にファイルの中身を読み込みます。その場合 $("#hpmethod")load("./hpmethod.txt")という形になります。ここでは、load_file()関数を作り、その関数を呼び出すようにしています。
