需要帮助了解如何对网站进行 ajaxify

Question

我最近发现了有关如何使用 History.js、jQuery 和 ScrollTo 使用 HTML5 History API 对网站进行 Ajaxify 处理的要点：https://github.com/browserstate/ajaxify

我很难获得这个工作的简单版本，我不确定我是否理解所有内容。首先，我加载了 gist 中提供的所有脚本，然后设置了一个非常简单的导航和内容部分：

 <ul id="nav">
    <li id="home-link"><a href="/" title="Home">Home</a>/</li>
    <li id="work-link"><a href="/work" title="Work">Work</a>/</li>
    <li id="labs-link"><a href="/labs" title="Labs">Labs</a>/</li>
    <li id="blog-link"><a href="/blog" title="Blog">Blog</a>/</li>
    <li id="contact-link"><a href="/contact" title="Contact">Contact</a></li>
</ul>

<div id="content"></div>

接下来，我更改了选择器变量以匹配 html：

/* Application Specific Variables */
contentSelector = '#content',
$content = $(contentSelector),
contentNode = $content.get(0),
$menu = $('#nav'),
activeClass = 'active',
activeSelector = '.active',
menuChildrenSelector = 'li',

接下来我应该做的是我迷路的地方。我要做的就是加载特定于所选导航链接的 html 内容。因此，如果我单击“工作”，我想将一个 work.html 文件加载到内容部分并将 URL 更改为“mywebsite.com/work”。为了简单起见，让我们说 work.html 和所有其他 ajaxable 内容都位于同一目录中。

非常感谢任何帮助！干杯!

Answer 1

所以这是一个真实的简单示例，说明我最终如何对我正在开发的网站进行 ajax 化，从而激发了这个问题。很抱歉耽搁了很长时间。首先是 HTML：

    <ul id="nav">
        <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li>
        <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li>
        <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li>
        <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li>
    </ul>

    <div id="content">Home Content</div>

接下来是 Javascript：

 <script type="text/javascript">

    var directory = 'content/'; //directory of the content we want to ajax in
    var state = History.getState();

    //for when they click on an ajax link
    $('.ajaxify').on('click', function(e){
        var $this = $(this);
        var href = $this.attr('href'); // use the href value to determine what content to ajax in
        $.ajax({
            url: directory + href + '.html', // create the necessary path for our ajax request
            dataType: 'html',
            success: function(data) {
                $('#content').html(data); // place our ajaxed content into our content area
                History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
            }
        });
        e.preventDefault(); // we don't want the anchor tag to perform its native function
    });

    //for when they hit the back button
    $(window).on('statechange', function(){
        state = History.getState(); // find out what we previously ajaxed in
        $.ajax({
            url: directory + state.title + '.html', //create our path
            dataType: 'html',
            success: function(data) {
                $('#content').html(data);
            }
        });
    });
    </script>

基本上我所做的只是拦截锚标记点击，使用“ajaxify”类来指示我想要加载哪些特定内容。一旦我拦截点击并确定要加载哪些内容，然后我使用 history.js pushSate () 来跟踪用户浏览网站的顺序并在不重新加载页面的情况下更改 url。如果他们决定点击后退按钮，statechange 监听器将加载正确的内容。如果他们决定点击刷新按钮，您将需要想出一种方法来使用不同的 url 名称复制索引页面。这在 php 中很容易做到，或者您可以根据需要复制、粘贴和重命名索引页。

这是我在 Github 上发布的一个示例：https://github.com/eivers88/ajaxify-simple-demo

提醒一下，在本地使用 ajax 时，最好在 MAMP 或 WAMP 等个人 Web 服务器上运行您的项目。在没有服务器运行的情况下，此演示将在 chrome 中失败。但是，它应该可以在没有服务器的情况下在 Firefox 中运行。

Answer 2

鉴于这些要求，您需要做很多事情。这是您可以使用的功能：

function doAjax(htmlpage){
$.ajax({
    url:"/"+htmlpage, 
    type: 'GET',
    success: function(data){
        $('#content').html(data)
    }
});
}

解决这个问题的最简单方法是将上面的标签调整为：

<a href="#" onclick="doAjax('work.html');return false;"><img></a>

然而，在顶部的脚本标记中使用 jquery 执行此操作会稍微更“正确”（尽管功能相同）：

$(function () {
    $('#buttonid1').click(function(){doAjax('work.html')});
    $('#buttonid2').click(function(){doAjax('about.html')});
    $('#buttonid3').click(function(){doAjax('contact.html')});
});

请注意，在这两种情况下，这些“work.html”页面不应该是完整的 html 文档，它们应该只是内容 div 中的内容。

这个 ajax 不会改变访问者看到的 url。要使其正常工作，您必须使用html5 history api。它比我上面的 ajax 请求要复杂得多。所以如果你没有完全掌握我上面写的内容，它可能合适也可能不合适。