イベントの委任を使用する
AJAXサイトの主な特徴は、イベント委任の使用です。 AJAXを介して挿入された可能性があるため、ページに要素が存在すると想定しないでください。イベントリスナー（要素）を要素（document.bodyを除く）に直接割り当てようとしないでください。 代わりに、最善の解決策はイベントの委任を使用することです。 jQueryで委任を使用する方法の非常に簡単な例を次に示します。
// Add event listener to the body because it is a constant jQuery("body").on("click", "a", function(event) { event.preventDefault(); // Trigger the XHR to load the page content // ... // Update the History with pushState // ... // Other tasks // ... });
サイトの作成中に、
<body>
以外の要素が存在しないかのようにコードを記述しました。 その結果、Aginal AJAXナビゲーションを実装するのに30分もかかりませんでした。 イベントの委任により、AJAXページの読み込みが可能になります。
シグナルイベントにPub / Subを使用する
から。 -シグナルイベント。たとえば、リンクのクリック。パブリッシュとサブスクライブを実装すると 、アプリケーションのパワーが大幅に向上します。 pub / subに慣れていない場合は、ラジオがどのように機能するかを想像してください。ラジオはブロードキャスト（ パブリッシュ ）し、誰がそれを聞いているかわかりません。 リスナーは、ステーション自体とは関係なくリッスン（ サブスクライブ ）できます。
pub / subを使用する理由と方法を説明するために、私のサイトの例を示します。 いずれの記事でも、最初に人気のソーシャルネットワークのウィジェットをダウンロードし、2番目に評価ウィジェットを表示して、ユーザーが記事の有用性を評価できるようにします。 より静的なサイトでは、コードを実行してDomContentLoadedでこれらのウィジェットを作成するだけです 。 複雑なAJAXサイトでは、これらの機能を数回実行する必要がある場合があるため、これらのウィジェットを再作成するためにページを変更する信号が必要です。
// In the method where we do the AJAX request for new page content.... jQuery.ajax({ url: event.target.href }).done(function(data) { // Place the content in the page // ... // Send a pub/sub signal that the page is ready so that widgets can be created publish("/page/loaded", data); // Arguments are the channel name and data }); // ... Elsewhere, where the we set up the social widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createSocialWidgets(data); // Fade in the widgets // ... }); // ... Elsewhere, where the we set up the rating widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createStarRatingWidget(data); // Fade in the widget // ... });
pub / subの良い点は、JavaScriptモジュールがAJAXを備えたパーツとは別個であり、大規模なコールバックを処理する必要がないことです。
publish
1回の呼び出しで、すべてのモジュールがこのイベントに
subscribe
して応答できるようにします。
単一のpushStateマネージャーを使用する
複雑なAJAXサイトは、新しいコンテンツをアップロードするだけでなく、HTML5 History APIを使用してURLを変更します。
pjax履歴用の人気のあるjQueryプラグイン。
ユーザーが現在のページのURLを更新、ブックマーク、または友人と共有できるように、閲覧履歴をAJAXページのダウンロードと同期させることが重要です。 また、ブラウザの前後のボタンが正しく機能することを保証します！
恒久的な場所に通知を投稿する
ユーザーにとって考えられる問題の1つは、ブラウザーの行にダウンロードステータスが表示されないことです。ページの特定の場所に通知（スピナー）を配置することで、ダウンロードステータスを停止できます。 処理がいつ行われるかをユーザーが常に知っていることが重要です。これは、コンテンツを動的にロードおよびレンダリングする場合に特に重要です。
URLによるクエリ結果のキャッシュ
ウェブでは、必要以上のリクエストは必要ありません。これは、ページを完全にリクエストする場合に特に当てはまります。 AJAXサイトのキャッシュシステムの作成は（通常）思っているよりもはるかに簡単です。
var cache = {}; // ... // ... within the AJAX callback cache[url] = data; // ... // ... within the click callback that would set forth a request if(cache[url]) { // Explicitly call the callback, passing it the cached page data return successCallback(cache[url]); } else { // ... do all of the AJAX request and callback stuff }
このキャッシュは、ユーザーがリンクを数回クリックした場合は使用されませんが、ユーザーがボタンを前後にクリックした場合は使用されます。 サーバーとユーザーは、クライアント側のキャッシュに感謝します！
AJAX を使用しない場合
すべてのページをAJAX経由で読み込む必要はありません。AJAXの使用に問題がある場合、開発者が判断できることが非常に重要です。 多くの場合、フォームの結果をキャッシュしたり、動的にフェッチしたりする必要はありません。 インフラストラクチャがAJAXワークロードの影響を受けるシナリオが存在する場合があります。 AJAXを使用してロードしないURLを定義できる場合、jQueryセレクターを変更できます。
jQuery("body").on("click", "a:not(href$='/some/page')", function(event) { });
URLをホストするためのコールバックにロジックを追加できます。 クリックしたときにURLが一致する場合、
preventDefault()
を呼び出してページを通常どおりにロードすることはできません。
柔軟なコードを事前に計画する場合、AJAX Webサイトの作成は想像以上に簡単です。 この投稿のヒントを思い出してください。80％は既に完了しています。 もちろん、一部の機能はサイト固有のものですが、アプリケーション全体に関しては重要ではありません。 ハッピーAJAXing！