ハッシュチェンジ

ハッシュチェンジとは?

  • Ajaxにより画面遷移しないでページ内容を書き換える事が可能だが、
  • その際にURLも一緒に変わらないと一意なURLが作れない、ブラウザの戻るボタンが期待通りに動作しない、等の問題がある。
  • この問題を解決する為に、ページ内容を書き換えるリンクをフラグメントURLにし、ハッシュチェンジイベント時にページ内容書き換えを行うようにする。

ハッシュチェンジによるページングの例

  • ページャーである「page 1」「page 2」のリンクをクリックすると、画面遷移せずにページ内容が書き換わる。
  • その際、URLは「http://localhost/#page1」「http://localhost/#page2」に変化する。
  • なお、ここではjQueryのハッシュチェンジイベントモジュールを使用している。
 <html>
 <head>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.min.js" type="text/javascript">
   </script>
   <script src="http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js"
   type="text/javascript"></script>
 </head>
 <body>
 <dl id="list"></dl>
 <hr />
 <div id="pager">
   <a href="http://localhost/1">page 1</a> <a href="http://localhost/2">page 2</a>
 </div>
 <script type="text/javascript">
 $(function () {
   // Ajaxによるページ内容書き換え -------------------------------------------- (1)
   function goPage(num) {
     console.log('called goPage(): ' + num);
     $.ajax({
       type : 'GET',
       url : './' + num + '.json',
       datatype : 'json',
       success : function (data) {
         var dl = $('#list');
         dl.children().remove();
         for ( k in data ) {
           var dt = $('<dt></dt>'), dd = $('<dd></dd>');
           dt.append(k); dd.append(data[k]);
           dl.append(dt); dl.append(dd);
         }
       },
       error : function (xhr, message) { console.log('ERROR: ' + message); }
     });
   }
 
   // ハッシュチェンジ時のイベントハンドラーを登録 ---------------------------- (2)
   $(window).hashchange(function (){
     var hash = decodeURIComponent(location.hash);
     var num = hash.replace('#page', '') || 1;
     if (isNaN(num)) num = 1;
     goPage(num);
   });
 
   // ページロード時の初期化 -------------------------------------------------- (3)
   $(window).hashchange();
 
   // SEO対策のURLをハッシュに変更 -------------------------------------------- (4)
   $('#pager').find('a').each(function(){
     var hash = $(this).attr('href').replace('http://localhost/', '#page');
     $(this).attr({ href : hash });
   });
 });
 </script>
 </body>
 </html>

説明

  • (2)でハッシュイベント時のイベントハンドラーとして、(1)のAjaxによるページ内容書き換え処理を登録する。
  • (3)でページロード時の初期化を行い、最初にこのページを開いた時にページ1を読み込むようにする。
  • (4)は(JavaScriptを認識しないクローラーがリンクを辿れるように)SEO対策のフルパスURLをフラグメントURLに置換している。

参考

AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法
http://ascii.jp/elem/000/000/504/504495/
JQUERY HASHCHANGE EVENT
http://benalman.com/code/projects/jquery-hashchange/docs/files/jquery-ba-hashchange-js.html

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS