基于 AJAX 的网站中的 URL 导航？答案

【问题标题】：URL Navigation in an AJAX Based Website?基于 AJAX 的网站中的 URL 导航？
【发布时间】：2010-04-06 16:52:12
【问题描述】：

我想开发一个完全采用 ajax 导航的网站，但这意味着用户无法共享、添加书签或直接访问某些内容。

我注意到一些网站（Gmail、Thesixtyone、Youtube）正在使用哈希标签为不同的页面配置创建自定义 URL。这种技术叫什么，我该如何实现？

【问题讨论】：

它被称为 Ajax 深度链接以防其他人想知道
谢谢@Atomix，我在找名字

标签： ajax url navigation

【解决方案1】：

我已将哈希爆炸方法用于具有 SEO 的完全 ajax 驱动的应用程序。根据我的经验，我认为这对于网络浏览器和智能手机浏览器来说都是非常可靠的方法。

这是我的方法。为简化代码，我将使用 Jquery / Zepto 代码

当您需要加载不同的 ajax 页面时，只需使用 javascript 更改 URL 哈希即可。

window.location.hash = '#!page1';

然后会从 javascript 触发哈希更改事件

$(window).on('hashchange',loadPage);

使用 loadPage 函数处理该事件

var loadPage = function(e){
    pageId = window.location.hash;

    _gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push

    if(pageId == '#!page1'){
        $.get('ajax/page1.php', function(response) {
           $('#main').html(response);
        });
    }else if(pageId == '#!page2'){
        $.get('ajax/page2.php', function(response) {
           $('#main').html(response);
        });
    }
}

通过这种方式，您可以通过键入 URL 和使用链接来加载页面。

现在是 SEO 部分。谷歌和其他主要搜索引擎开发了一种爬取基于 ajax 的网站的方法。如果你使用 #!在您的网址中，谷歌将替换 #!部分与 '?_escaped_fragment_' 并会要求您提供内容。例如

www.yoursite.com/#!page1 将转换为 www.yoursite.com/?_escaped_fragment_=page1

您需要做的就是将 _escaped_fragment_ 捕获为 GET 参数。如果你使用 php，代码会是这样的

if (isset($_GET['_escaped_fragment_'])) {           
    $fragment = $_GET['_escaped_fragment_'];

    if($fragment == 'page1')
        echo include 'ajax/page1.php'; // or use readfile method
    else if($fragment == 'page2')
        echo include 'ajax/page2.php'; // or use readfile method
}

您还可以通过捕获_escaped_fragment_为每个页面单独设置html页面标题和描述

另外，您可以使用 #! 在社交媒体中分享网址！也是。它将在_escaped_fragment_的帮助下被解析为常规链接

我希望这种方法可以帮助您解决所有问题。

【讨论】：

【解决方案2】：

Loon 进入 JQuery 地址。 http://www.asual.com/jquery/address/

这正是您所说的。但是，由于您询问自定义 URL 中的 # 是什么意思，我假设您对此还很陌生。 jQuery 地址一开始看起来很吓人，但其实很简单。您也应该使用 JQuery 进行所有 ajax 处理。

# 是一个锚标记。如果你这样做<a name="list">This is an anchor tag</a>然后将#list添加到url，页面将跳转到name = list的a标签。

【讨论】：

发现提到的插件非常好用。

【解决方案3】：

如果您有 ajax 更新的 div 内容，这里是使用 jquery 地址库http://www.asual.com/jquery/address/ 的示例。

<body>               
    <div id="content">
        Your ajax content...
    </div>
</body>

包含jquery地址库，然后

$(document).ready(function () {   

        $('a').address();

        $.address.externalChange(function (e) {
            if (e.value != '/') {
                $('#content').load(e.value);
            }
        });
 });

如果你想排除一些历史导航的href

$('a[href!="#"]').address();

【讨论】：