0

私たちはかなり標準的な Web サイトを持っており、ページ間のリンクを AJAX 呼び出しに変換するタスクを取得しましたが、(検索エンジンなどからの)直接リンクも機能するように維持しています。

私の目標：

  • 直接リンクを以前と同じように機能させたままにして (古い IE の場合はハッシュ フォールバック)、直接リンクによる到着からスムーズに移行し、AJAX を使用してさらにブラウジングします。
  • いくつかの「ガベージ コレクション」を実装します (以前に表示したページの DOM、スクリプト ハンドラーなど)。

jQuery Mobile で似たようなものを見たことがありますが、インスピレーションを得る (またはコードを借りる) ためのより一般的なソリューションを探しています :)

4

2 に答える 2

2

まず、外部リンクと内部リンクを分離できる必要があります。そのために、次の JQuery セレクターを作成しました。

$.expr[':'].internal = function (obj) {
    return (obj.hostname == location.hostname);
};

$.expr[':'].external = function (obj) {
    return (obj.hostname != location.hostname);
};

これにより、すべての内部リンクまたは外部リンクを選択できます$("a:internal")....

次に、すべての内部リンクでクリック イベントをオーバーライドし、デフォルトの動作をオーバーライドして、Href URL を取得し、href URL に対して ajax リクエストを実行して、結果を本文に吐き出す必要があります。

    $("a:internal").click(ajaxLinkHandler);

    function ajaxLinkHandler() {
       $.get($(this).attr("href"), function(data) {
       $('body').html(data);
     });
}

ブラウザの履歴/戻るボタンとアドレスバーの更新を有効にするために、 history.jsも確認する必要があります。また、サーバー側で AJAX リクエストを検出して のみを返す<body>か、そうでない場合はすべてを返し、上記の例を次のように変更する必要があります。$("html").html(data).

onLoad/DOM イベントを処理するか、新しい JQuery "On" Handler を使用する必要があります。$(document).on("click", "a", ajaxLinkHandler)これにより、クリック イベントがドキュメントにバブルアップしたときに、アンカー タグから開始されたかどうかがチェックされるため、onReady イベントは必要ありません。

ブラウザーが DOM ガベージ コレクションを管理します。任意の JQuery ページを開き、firebug/chrome 開発ツールの [DOM] タブに移動して、ドキュメントを調べます。次に、コンソール タブに移動し、$("html").remove() と入力して DOM タブに戻ると、完全にクリーンアップされていることがわかります。remove() ではなく replace() を呼び出しているため、古い DOM 要素は AJAX 呼び出しからの新しい要素に置き換えられます。

于 2012-05-08T10:43:31.370 に答える
1

自然な HTTP 動作ではなく、AJAX を介してページをロードすることは、比較的簡単に実装できます。リンクをハイジャックし、デフォルトのクリックスルー動作を停止し、AJAX マジックを実行するだけです。

$(document).on('a', 'click', function (e) {
    e.preventDefault();
    // perform your AJAX
});

ちょっと頭が痛いのはクロールです。Google でそれを実現するには、クライアント側とサーバー側の両方のコードを作成する必要があります (これは基本的に重要なことですよね?)。これを Googlebot で機能させる方法については、Google の開発者向けドキュメントをお読みください。

于 2012-05-08T10:23:48.213 に答える