6

AJAXを使用してフェッチされたページまたはコンテンツを「ブックマーク」する方法は？

「アンカー」に詳細を追加し、ルーティングを使用するか、PHPコードまたはRuby on Railsのroute.rbを使用してその部分をキャッチし、コンテンツまたはページを表示するだけで簡単にできるようです。によると？（ページ全体またはコンテンツの一部を表示）

それならそれはとても簡単にできますか？それがFacebookのやり方のようです。それを行う他の良い方法は何ですか？

4

5 に答える 5

7

更新：HTML4機能を廃止するHTML5 History API（pushState、popState）が追加されましたhashchange。History.jsは、ブラウザー間の互換性と、HTML4ブラウザー用のオプションの hashchangeフォールバックを提供します。

ページの履歴を保存するために、最も人気があり、フル機能/サポートされている方法は、ハッシュ変更を使用することです。これは、あなたがに行ったと言うと、その変更を追跡できることを意味yoursite/page.html#page1しyoursite/page.html#page2ます。ハッシュを使用しているため、ブックマークや戻るボタンと進むボタンで取得できます。

jQuery Historyプロジェクトhttp://www.balupton.com/projects/jquery-historyを使用して、ハッシュの変更にバインドするための優れた方法を見つけることができます 。

フル機能のAJAX拡張機能もあり、Ajaxリクエストを州/ハッシュに簡単に統合して、Webサイトをフル機能のWeb 2.0アプリケーションに変換できます： http ：//www.balupton.com/projects/jquery-ajaxy

どちらもデモページに優れたドキュメントを提供して、何が起こっているのか、何が起こっているのかを説明しています。

jQuery Historyの使用例を次に示します（デモサイトから取得）。

// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
    // Update the current element to indicate which state we are now on
    $current.text('Our current state is: ['+state+']');
    // Update the page"s title with our current state on the end
    document.title = document_title + ' | ' + state;
});

// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
    // Update Menu
    updateMenu(state);
    // Show apricots tab, hide the other tabs
    $tabs.hide();
    $apricots.stop(true,true).fadeIn(200);
});

そして、jQuery Ajaxyの例（デモサイトから取得）：

        'page': {
            selector: '.ajaxy-page',
            matches: /^\/pages\/?/,
            request: function(){
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
                // Adjust Menu
                $menu.children('.active').removeClass('active');
                // Hide Content
                $content.stop(true,true).fadeOut(400);
                // Return true
                return true;
            },
            response: function(){
                // Prepare
                var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
                // Adjust Menu
                $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
                // Show Content
                var Action = this;
                $content.html(data.content).fadeIn(400,function(){
                    Action.documentReady($content);
                });
                // Return true
                return true;

また、クエリ文字列パラメータ（so yoursite/page.html#page1?a.b=1&a.c=2）を取得したい場合は、次を使用できます。

$.History.bind(function(state){
    var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}

したがって、これらのデモリンクをチェックして、実際の動作と、すべてのインストールおよび使用法の詳細を確認してください。

于 2010-08-03T09:20:35.990 に答える
1

jqueryを使用する場合は、簡単な方法でそれを行うことができます。ajaxifyプラグインを使用するだけです。ajaxページのブックマークや他の多くのものを管理できます。

于 2010-06-26T08:42:17.603 に答える
1

これを確認してください、何かがあなたを助けるかもしれません：

  1. JavaScriptからURLを変更する方法：http：//doet.habrahabr.ru/blog/15736/
  2. アプリの状態をURLにパックする方法：http：//habrahabr.ru/blogs/javascript/92505/
  3. アプローチの説明： http： //habrahabr.ru/blogs/webstandards/92300/

注：すべての記事はロシア語であるため、Googleで翻訳するか、コードを確認して詳細を推測してください。

于 2010-08-03T09:42:08.983 に答える
1

シングルページインターフェイスマニフェストをご覧ください

于 2011-02-09T16:27:26.750 に答える
0

たくさんのパッケージを試しました。jQueryHistoryプラグインは最も完全なようです。

http://github.com/tkyk/jquery-history-plugin

于 2010-08-20T16:15:16.450 に答える