需要帮助了解如何ajaxify一个网站 [英] Need help understanding how to ajaxify a web site

问题描述

我最近发现了如何使用History.js，jQuery和ScrollTo使用HTML5 History API对网站进行Ajax化： https://github.com/browserstate/ajaxify

I recently found this gist on how to Ajaxify a Website with the HTML5 History API using History.js, jQuery and ScrollTo: https://github.com/browserstate/ajaxify

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

I am having a hard time getting a simple version of this working and am not sure I understand everything. First, I loaded all the scripts provided in the gist, then set up a really simple nav and content section:

 <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：

Next, I changed the selector variables to match the html:

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

接下来应该做的就是我迷路的地方。我想要做的就是加载特定于所选导航链接的html内容。因此，如果我点击工作，我想将work.html文件加载到内容部分，并将网址更改为mywebsite.com/work。为了让事情变得简单，可以说work.html和所有其他可写内容都位于同一目录中。

What I'm supposed to do next is where I get lost. All I want to do is load in html content specific to the nav link selected. So if I clicked "Work", I would like to load a work.html file into the content section and change the url to "mywebsite.com/work". To keep things easy lets say work.html and all other ajaxable content is located in the same directory.

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

Any help is greatly appreciated! Cheers!

推荐答案

所以这里有一个真正的简单例子，说明我如何最终激活我正在研究的网站，这启发了这个问题。对不起，真的很长时间了。首先是HTML：

So here is a real bare bones example of how I ended up ajaxifying the website I was working on that inspired this question. Sorry for the really long delay. First the 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：

Next the 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（）来跟踪用户通过网站的顺序并更改网址而不重新加载页面。如果他们决定点击后退按钮，状态更改侦听器将加载正确的内容。如果他们决定点击刷新按钮，您将需要提供一种使用不同网址名称复制索引页的方法。这在php中很容易，或者你可以根据需要复制，粘贴和重命名索引页。

Essentially all I am doing is intercepting anchor tag clicks with the class 'ajaxify' used to signal what specific content I want to load in. Once I intercept the click and determine what content to load, I then use history.js pushSate() to keep track of what order the user is going through the site and change the url without reloading the page. If they decide to hit the back button, the statechange listener will load in the correct content. If they decide to hit the refresh button, you will need to come up with a method of duplicating your index page with the different url names. This is easy to do in php or you could just copy, paste, and rename the index page as needed.

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

Here is an example I posted on Github: https://github.com/eivers88/ajaxify-simple-demo

提醒一下，在本地使用ajax时，最好在个人网络服务器上运行你的项目，如 MAMP 或 WAMP 。如果没有运行服务器，此演示将在chrome中失败。但是，它应该在没有服务器的Firefox中工作。

Just a reminder, when working with ajax locally, it is best to run your projects on a personal web server like MAMP or WAMP. This demo will fail in chrome without a server running. However, it should work in firefox without a server.

这篇关于需要帮助了解如何ajaxify一个网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！