需要帮助了解如何ajaxify一个网站

Question

我最近发现了如何使用History.js,jQuery和ScrollTo使用HTML5 History API对网站进行Ajax化的要点: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文件加载到内容部分,并将网址更改为"mywebsite.com/work".为了让事情变得简单,可以说work.html和所有其他可共享的内容都位于同一目录中.

任何帮助是极大的赞赏!干杯!

Answer 1

所以这里有一个真正的简单例子,说明我如何最终激活我正在研究的网站,这启发了这个问题.对不起,真的很长时间了.首先是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()来跟踪用户通过网站的订单,并在不重新加载页面的情况下更改网址.如果他们决定点击后退按钮,状态更改侦听器将加载正确的内容.如果他们决定点击刷新按钮,您将需要提供一种使用不同网址名称复制索引页的方法.这在php中很容易,或者你可以根据需要复制,粘贴和重命名索引页面.

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

请注意,在本地使用ajax时,最好在MAMP或WAMP等个人Web服务器上运行项目.如果没有服务器运行,此演示将在chrome中失败.但是,它应该在没有服务器的Firefox中工作.