[JavaScript][jQuery]あるHTMLファイルから別のHTMLファイルをロードする

例えば下記のフォルダ構成だったとして、

view
 - top.html
 - layout.html

top.html 内で layout.html をロードしたい場合。

./view/top.html

<html>

  <head>
    <script type="text/javascript" src="../js/top.js"></script>
  </head>

  <body>
    <div id="body"></div>
  </body>

</html>

./js/top.js

/** ロード完了時 **/
$(document).ready(function() {
  $('#contents').load('../view/layout.html');
});

することで、top.html ロード完了時に、layout.html をロードする。

jsp:include などを使うと、サーバ側で画面をまとめてくれて
・簡単に実装できる
・オーバーヘッドかからない
ので、load()なんて使う機会ないな〜と思ってた。

けれども新案件の要件が
・サーバ処理は行わない（HTML, Javascript, css を取得するのみ）
・通信はできるだけ控える
・ページ数は20を超える
なので、画面を分けて開発を進めていくのが得策と思い導入した。
リリース時には HTML/js/css ともに1ファイルにまとめる予定。

サブノート