javascript - 需要帮助了解如何对网站进行 ajax 化

Question

我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/browserstate/ajaxify

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

 <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 和所有其他可使用 ajax 的内容位于同一目录中。

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

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>

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

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

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