Question

如何使用AJAX“书签”页面或内容？

如果我们只是将细节添加到“锚点”，然后使用路由甚至在PHP代码或Ruby on Rails的route.rb中捕获该部分，然后显示相应的内容或页面？（显示整页或部分内容）

那么它可以很简单吗？看起来这就是facebook的做法。有什么其他好办法吗？

Answer 1

更新：现在有HTML5历史记录API（pushState，popState），它弃用了HTML4 hashchange功能。 History.js为HTML4浏览器提供跨浏览器兼容性和optional hashchange备用。

要存储页面的历史记录，最受欢迎且功能齐全/支持的方式是使用hashchanges。这意味着，如果您从yoursite/page.html#page1转到yoursite/page.html#page2，则可以跟踪该更改，并且由于我们使用的是哈希，因此可以通过书签以及后退和前进按钮来选择。

您可以使用jQuery History项目找到绑定到哈希更改的好方法 http://www.balupton.com/projects/jquery-history

还有一个功能齐全的AJAX扩展，允许您轻松地将Ajax请求集成到您的状态/哈希，将您的网站转换为功能齐全的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;

如果您想获得查询字符串参数（所以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}}
}

请查看这些演示链接，了解它们的运行情况，以及所有安装和使用详情。

Answer 2

如果使用jquery，则可以通过简单的方式完成。只需使用ajaxify插件。它可以管理ajax页面和许多其他东西的书签。

Answer 3

检查一下，有些东西可以帮到你：

如何从javascript更改网址：http://doet.habrahabr.ru/blog/15736/
如何将应用状态打包到网址：http://habrahabr.ru/blogs/javascript/92505/
方法说明：http://habrahabr.ru/blogs/webstandards/92300/

注意：所有文章均为俄语，因此Google翻译它们，或只是查看代码并猜测细节。

Answer 4

查看Single Page Interface Manifesto

Answer 5

我尝试了很多套餐。 jQuery History插件似乎最完整：

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

如何使用AJAX“书签”页面或内容？

5 个答案: