jQuery を使ってサイドバーを AJAX で読み込む

シェアする

jQuery でサイドバーを読み込む!

mt.Vicuna(と MT4)に移行しようと、一万年と二千年前から、日夜がんばっています。仕事中の空き時間とかに。

今回は、みんな大好き jQuery を使って、簡単に「サイドバーを AJAX で読み込む方法」を紹介します。

いくつか方法はあると思いますが、JSON で云々といった方法よりも簡単な、PHP(readfile, include, …) や SSI を使うのに近いやり方です。

jQuery を使えば、ほんの数行のスクリプトでできますよ。

サンプルページ

まずは、完成したサンプルページをご覧ください。

見た目は同じですが、後者はサイドバー部分(<div id="utilities"></div>)を AJAX で読み込んでいます。「ソースを表示」してみてください。

肝心のコードは?

まず、サイドバー部分・div#utilities の中身はこれだけです。過去記事へのリンクのみ張っています(JavaScript を表示しないブラウザ向け)。

<div id="utilities">
<p class="archives"><a href="#" title="過去の記事を読む">More...</a></p>
</div>
<!--end utilities-->

中身は、まったくそのままの内容で、「utilities_inc.html」とでも名前をつけて出力するようにします(新規インデックステンプレートを作る)。

そして、下記コードで読み込みます。

<script type="text/javascript" src="http://example.com/js/jquery-1.2.1.min.js"></script>
<!-- jQuery を利用してサイドバーの内容を AJAX で読み込む! -->
<script type="text/javascript">
$(function(){                  // DOMの読み込みが完了したら実行
$("#utilities")                // ID utilitiesの
.empty()                       // 子要素を消去して
.load("./utilities_inc.html");  // AJAXで内容を読み込む
});                            //これだけ :-D
</script>

──なんと、たったこれだけです。肝心の部分は、まとめてワンライナでも書けます。

$("#utilities").empty().load("./utilities_inc.html");

自分が jQuery のことを「ちょっとすごい CSS」と呼ぶ理由が、おわかりいただけたでしょうか?

注意点

AJAX の、というか JavaScript の仕様上、サイドバーに別の JavaScript を読み込む記述がある場合、うまく動作しません。

その回避策は──いろいろありますが、また次回、もしくはみなさんへの宿題ということで……。

あとちなみに、AJAX で読み込むと「とくに IE は 強力にキャッシュされる」ので、サイドバーの内容を更新しても反映されない、ということをよく聞きますが、jQuery の load を使う限り大丈夫でした。

なぜ AJAX 化するのか

狙いはこんなところ。

  • 共通部分を一ファイルにまとめて管理しやすく
  • ページのファイルサイズを減らす
  • 検索エンジンのボットに拾われない
感謝!

サンプルページは、下記のページをそのまま使いました(Copyright やライセンス表示を消さずに改変しましたが、これで良かったでしょうか?)

wu さんに感謝!