History APIをサポートする（およびサポートしない）1ページのajaxアプリケーションを作成する

この記事のコメントから判断すると、ajaxナビゲーションを使用できるWebアプリケーションを作成することはコミュニティにとって興味深いトピックであり、これまでのところ、同様のタスクに遭遇した人はほとんどいません。 jQuery-Pjax（またはそのフォーク）と呼ばれる小さなライブラリを使用したソリューションについて説明します。

私の動機：プロジェクトでは、サイト上のナビゲーションに関係なく再生するmp3プレーヤーを実装する必要がありました。 次に、pushStateを使用せずにブラウザーのサポートを追加する必要があり、ライブラリーをフォークしました。

主な機能

• 完全なページのリロードなしのサイトナビゲーションとフォーム処理
• 直接アクセスできるきれいなURL
• ＃！/レガシーブラウザのハッシュサポート（私のバージョンに追加）
• 最新のブラウザの戻るボタンと進むボタンの操作
• そして今、古いもののために-benalman.com/projects/jquery-hashchange-pluginのおかげで
• IE7には問題があるようです（ Nc_Softに感謝） （特に、 Nc_Softに参加してくれてありがとう ） 、そしておそらくオペラ11.5（まだ確認できませんが、 dev.opera.com / articles / view / introducing -the-html5-history-api ）-メッセージartishok-チェックされ、アセンブリ1074で動作します（ not_ice ）
• imsamurai （ https://github.com/imsamurai ）は、ライブラリの改善を提案しました（そして、変更を喜んでマージしました）：フォームを送信するための組み込み関数、ハッシュとより開発されたトリガーシステムの改善。 （残念ながら、imsamuraiはハブにアカウントを持っていません-喜んでお手伝いします）

参照資料

• jQuery Pjax github.com/defunkt/jquery-pjax
• ハッシュナビゲーションをサポートする私のフォークgithub.com/ckald/jquery-pjax
• 私のプロジェクトamsterdamusic.com.uaの例の図書館の仕事
• pjax.heroku.comの作成者からの例

Pjaxの仕組み

基礎-通常のクエリと特定のヘッダーを持つクエリの個別の出力とキャッシュ。 つまり、ページテンプレートを表示する前にコントローラーで、たとえば次のようにX-PJAXヘッダーの存在を確認する必要があります。

PHP：

if (!isset($_SERVER['HTTP_X_PJAX']) { // here is regular-kind load } else { // here you don't print page layout — just the page } 

さらに、ナビゲーションコントロールをjavascriptに転送するリンクでイベントが一時停止されます（これは最も虹色で目立たない実装ですが、他ではあまり意味がありません）。 私の場合、次のようなものがあります。

 $('#pjaxcontainer a:not(.logout-link,.login-link,.login_link,[id*="login_link"],[href*="#"],[target="_blank"],' +'[href$="mp3"],[href$="jpg"],[href$="jpeg"],[href$="gif"],[href$="png"],[href$="doc"],[href$="pdf"])') .pjax('#pjaxcontainer', { timeout: 0 }); 

フォームの処理には、次を使用します。

 $('#pjaxcontainer form').live('submit',function(a){ // display loading message $('#loading-shade').show(); if( !$(a.target).attr('action')) a.target = $(a.target).closest('form'); data = $(a.target).serialize(); cont = $('#pjaxcontainer'); $.ajax({ type: "POST", url: $(a.target).attr('action'), data: data, beforeSend : function(xhr) { return xhr.setRequestHeader('X-PJAX','true'); // IMPORTANT }, success: function(msg){ cont.html(msg); $('#loading-shade').hide(); }, error: function(a,b,c) { $('#loading-shade').hide(); } }); a.preventDefault(); return false; }); 

ただし、もちろん、特定のクラスまたはdata-pjax属性を使用してリンクを取得できます。

また、2つの便利なイベントがあります。

  $('body').bind('start.pjax',function() { setTimeout("$('#loading-shade').hide();",2000); // to be sure that loading message hides $('#loading-shade').show(); }); $('body').bind('end.pjax',function() { $('#loading-shade').hide(); }); 

Pjaxの詳細については、githubのREADME.mdを参照してください。

ハッシュナビゲーションの終了

ライブラリの作成者はハッシュサポートを追加するように何度も求められましたが、彼の立場は基本的でした （ github.com/defunkt/jquery-pjax/issues/3#issuecomment-986233、github.com/defunkt/jquery-pjax/issues/3# issuecomment-1353555 、 github.com / defunkt / jquery-pjax / issues / 3＃issuecomment-1354589 ）。 したがって、自動スイッチを＃！/ハッシュに追加し、2種類のアドレスを無料で変換することで、少し変更しました。

ただし、私の変更では、2つのパラメーターを指定する必要があります。

 $.siteurl = 'http://yousite.com'; $.container = '#pjaxcontainer'; 

おわりに

したがって、数行のコードで単一ページのWebアプリケーションを実装します。 コメントとバグトラックに感謝します。

自由にフォークしてロールバックしてください©defunkt

ヒントをありがとう。

=>

計画

このプロジェクトでの作業は非常に有益でした-もっと伝えるべきことがあるからです。 次の記事では、jPlayer（http://jplayer.org/）に基づくプレイリストを使用した多機能オーディオビデオプレーヤーの作成について説明します。

---

重要なコメント

Devgru、2011年7月12日午後8時43分＃

感嘆符は、このコンテンツに他の方法でアクセスできることを示す検索エンジンの特別なシグナルです。 これがないと、検索エンジンのハッシュナビゲーションは本当にブラックボックスに変わります。

Devgru、2011年7月12日午後11時29分＃

あまり好きではありません。
処理には追加のURLが使用されます。 仕様と初期イニシアチブを参照してください。

そして、はい、それはこれまでのところGoogleだけのようです。
私はこの機能を使用しませんでした、ただ読みました。

---