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

Question

我想开发一个完全ajax导航的网站,但这意味着用户无法共享,收藏或直接访问某些内容.

我注意到一些网站(Gmail,Thesixtyone,Youtube)正在使用哈希标签为不同的页面配置创建自定义网址.这个技术被称为什么,我该如何实现呢？

Answer 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_的帮助下,它将被解析为常规链接

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

Answer 2

很快进入JQuery地址. http://www.asual.com/jquery/address/

这正是你所说的.但是,既然你问自定义网址中的#意味着什么,我认为你是相当新的.JQuery地址起初看起来很吓人,但它真的很容易.您也应该使用JQuery进行所有的ajax处理.

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