もっと深く掘り下げて、私を待っている落とし穴と、全体の複雑さを正確に把握することにしました。 私がこの問題をより詳細に研究したとき、私はまだいくつかの困難に遭遇しましたが、それらが重要であるとは言いません。 すべてが決定され、非常にシンプルになったので、本格的なAjaxナビゲーションを作成した私の経験を皆さんと共有したいと思います。
どこから始めますか？ 理論
結果として何を得たいですか？ 通常のナビゲーションシステムを使用して、検索エンジンがインデックスを作成できる本格的なサイトを取得したいと考えています。
私は次のソリューションを選択しました。サイトは普通（ajaxなし）で、通常のリンク（/ニュース/または/連絡先/）で、ナビゲーション用のインターセプターを追加するだけでした。 リンクをクリックすると、プログラムはajaxLoadパラメーターのみを使用してPOST要求を同じページに送信しました。これは、ページの一部のみ（ヘッダー、スタイル、スクリプトなどを除く）を提供する必要があることをサーバーに伝えました。正しい場所に置き換えられました。
例として、このシステムを実装したサイトwicegoal.comをご覧ください 。 （このサイトはまだ開発中ですので、ナビゲーションリンクと最上部の国をご覧になることをお勧めします）。
JavaScriptライブラリーとしてjQueryを選択しました。 解決する必要がある最初の問題は、リンクとブラウザーナビゲーションでした。 ブラウザーボタンのクリックを前後にインターセプトする必要があります。もちろん、ユーザーがブックマークにサイトを追加できることを確認してください。 2つのオプションがあり、それぞれに欠点があります。
- ハッシュリンク。 それらはすべてのブラウザーと互換性があるという点で優れていますが、大きなマイナスがあります-PHPでそれらを使用することはできません。これにより、リロード後にページを判別できないなど、多くの問題が発生します。 実際、この問題を解決するためにいくつかの異常な方法を考え出すことができます。たとえば、ユーザーがリンク/＃page = / news /をクリックすると、単純にpage / news /にリダイレクトされますが、オプションは明らかに最適ではありませんが、あることが起こる。
- HTML5 History API。 このオプションははるかに優れています。 それを導入する意味はありません。 すでに行われています。このオプションには1つの大きなBUTしかありません 。IEのバージョンはサポートしていません。
もちろん、たとえば、これを行う方法を見つけることができます。最新のブラウザーの場合はHistory APIを選択し、IEの場合はハッシュリンクを選択します。 さらに、Ajaxを含まない、検索エンジンが機能するサイトのバージョンが必要です。
不要な問題を自分で作成しないように、History APIとajaxを使用しないバージョンのみに制限することにしました。
ナビゲーションエンジンの開発
最初にしたことは、リンク処理を処理するnavigator.jsファイルを作成し、そこにイベントを配置することでした。
if (history.pushState) { $('.navigation-menu').live("click", function(){ setPage($(this).attr('href')); return false; }) }
ここでは、最初に、History APIがブラウザでサポートされているかどうかを確認し、サポートされている場合は、 ナビゲーションメニュークラスを使用してすべてのリンクのハンドラーを切断し、ハンドラーがsetPage関数を呼び出します。
function setPage(page) { $.post(page, { ajaxLoad: true }, function(data){ $('#content-inner').html(data); NavigationCache[page] = data; history.pushState({page: page, type: "page"}, document.title, page); }) }
この関数は、必要なページに投稿リクエストを送信します。 ajaxLoadパラメーターに注意する価値があります。 このパラメーターは、ページを提供するサーバースクリプトに必要です。 ajaxLoadパラメーターがある場合、サーバーはページの必要な部分のみを提供し、そうでない場合、サーバーはヘッダー、フッター、ナビゲーションなどとともにページ全体を提供します。
たとえば、 site.com / news /ページに直接アクセスすると、ページ全体が表示され、ajaxリンクを介してメインリンクでこのページに移動する場合、その一部のみを取得する必要があります。ブロックに＃content-innerを挿入します。ページ全体は必要ありません。余分なコード全体をドラッグしても意味がありません。
あなたがおそらく興味を持っているもう一つのポイントもあります、私はこの行について話している：
NavigationCache[page] = data;
この行は、受け取ったページをキャッシュに書き込みます。 なぜこれが必要なのかという疑問は、ブラウザのナビゲーションに関しては自然に消えます。 ページが再びロードを開始するまで待機するよりも、[戻る]ボタンをクリックしたときにキャッシュから即座に応答を取得する方がはるかに優れています。 キャッシュを機能させるには、ファイルの最初に次のコードを追加する必要があります。
var NavigationCache = new Array(); $(document).ready(function(){ NavigationCache[window.location.pathname] = $('#content-inner').html(); history.pushState({page: window.location.pathname, type: "page"}, document.title, window.location.pathname); });
サイトがロードされると、表示されたページの配列が作成されます。 お気づきかもしれませんが、現在のページのhtmlコードが最初に追加されます。 ajaxリンクをクリックするたびに、ページコードがこの配列に書き込まれます。
次に、ブラウザのナビゲーションでハンドラーをハングアップする必要があります。 History APIのonpopstateイベントがこれを担当します。ここではキャッシュを使用します。
window.onpopstate = function(event) { if (event.state.type.length > 0) { if (NavigationCache[event.state.page].length>0) { $('#content-inner').html(NavigationCache[event.state.page]); } } }
このイベントは、ブラウザーでボタンを前後に押すことでトリガーされます。ユーザーが前のページに戻ったときに、 コンテンツをキャッシュから＃content-innerブロックに挿入するだけです。
何が原因でしたか？
そのため、プログラムは、 ナビゲーションメニュークラスを使用してリンクのクリックをインターセプトし、ページの一部のみを読み込み、キャッシュに書き込みます。 ページ全体をリロードしないため、サイトは非常に高速で動作し、前のページに戻るために、何もダウンロードする必要はありません。 私たちがしているのは、リンクのクリックをインターセプトし、正しいリンクをロードするだけです。
navigator.jsファイル全体は次のようになります。
var NavigationCache = new Array(); $(document).ready(function(){ NavigationCache[window.location.pathname] = $('#content-inner').html(); history.pushState({page: window.location.pathname, type: "page"}, document.title, window.location.pathname); }); function setPage(page) { $.post(page, { ajaxLoad: true }, function(data){ $('#content-inner').html(data); NavigationCache[page] = data; history.pushState({page: page, type: "page"}, document.title, page); }) } $(document).ready(function(){ if (history.pushState) { window.onpopstate = function(event) { if (event.state.type.length > 0) { if (NavigationCache[event.state.page].length>0) { $('#content-inner').html(NavigationCache[event.state.page]); } } } $('.navigation-menu').live("click", function(){ setPage($(this).attr('href')); return false; }) } })
サイトをそのようなアプローチに変換するのは非常に簡単です。 サーバーパーツを操作し、ajaxLoadパラメーターがある場合とない場合にパーツまたはページ全体を提供するように指示するだけです。 ajaxを使用するかどうかは意見の問題ですが、このアプローチでマイナスを1つも見たことはありません。