Jquery非同期通信でローカルのファイルを読み込む

jquery非同期通信で割と利用頻度が高いかな、と思われる処理です。

サンプル

ローカルにあるファイルを読み込み、指定箇所に表示します。

単純に読み込むだけ

$(function(){
  $("#str").load("01/01.html"); //デフォルトで読み込む
});

クリックで変更する場合

$(function(){
  $("#str").load("01/01.html"); //デフォルトで読み込む

  $("#sel a").click(function(e){   //<ul id="sel">内のAタグをクリックしたら
     var Id = $(this).attr("id");  // idを得る
     $("#str").load("01/"+Id);     //01.html
     e.preventDefault();           //イベントの停止
  });
});

リンクをクリックしたときに、どのファイルを表示するかは様々な方法があると思いますが、ここではAタグのidにファイル名を書いておき、それを表示するようにしています。