Javascript 需要帮助了解如何ajaxify网站吗

我最近发现了关于如何使用History.js、jQuery和ScrollTo使用HTML5历史API对网站进行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内容。因此，如果我单击“Work”，我想将Work.html文件加载到内容部分，并将url更改为“mywebsite.com/Work”。为了方便起见，让我们假设work.html和所有其他ajaxable内容位于同一目录中

---

非常感谢您的帮助！干杯

考虑到这些要求，您需要做很多事情。以下是您可以使用的函数：

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

最简单的方法是将上面的标签调整为：

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

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

---

这个ajax不会改变访问者看到的url。要让它发挥作用，你必须使用。这比我上面提到的ajax请求要复杂得多。因此，如果你没有完全掌握我上面写的内容，那么这可能是合适的，也可能不是合适的。

下面是一个真实的简单例子，说明我是如何最终将激发这个问题的网站进行了Ajaxing的。很抱歉耽搁了这么长时间。首先是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>

var目录='content/'//我们希望在其中使用ajax的内容目录
var state=History.getState（）；
//当他们点击ajax链接时
$（'.ajaxify'）。在（'click'，函数（e）上{
var$this=$（this）；
var href=$this.attr（'href'）；//使用href值来确定ajax中的内容
$.ajax({
url:directory+href+'.html'，//为ajax请求创建必要的路径
数据类型：“html”，
成功：功能（数据）{
$（'#content'）.html（数据）；//将Ajax内容放入内容区域
History.pushState（null，href，href+'.html'）；//更改url并将ajax请求添加到历史记录中
}
});
e、 preventDefault（）；//我们不希望锚标记执行其本机功能
});
//当他们按下后退按钮时
$（窗口）.on（'statechange'，function（））{
state=History.getState（）；//找出我们之前在中使用的内容
$.ajax({
url:directory+state.title+'.html'，//创建我们的路径
数据类型：“html”，
成功：功能（数据）{
$（'#content'）.html（数据）；
}
});
});

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

下面是我在Github上发布的一个示例：

---

提醒一下，在本地使用ajax时，最好在个人web服务器（如或）上运行项目。如果没有服务器运行，此演示将在chrome中失败。不过，它应该可以在firefox中工作，而不需要服务器。

谢谢Landon，我已经知道如何单独使用

$.ajax

。我真的很想使用我上面链接的要点，因为它处理跨浏览器兼容性问题，并且优雅地降级。我理解掌握魔法背后的API的重要性，但短期内我只想让一个简单的网站使用这个要点。哦，好吧，祝你好运，仅供参考，在你正在处理的页面上发布一个链接，展示你的尝试，这样人们就可以帮助识别错误。你介意对每一行进行评论吗？多年来，我曾多次尝试实现这一点，但从未成功——我目前的错误与404有关，基本上整个网站的格式在点击链接时“中断”。我引用了脚本源

jquery scrollto.js

，

jquery.history.js

和

ajaxify-html5.js

，如

https://github.com/browserstate/ajaxify

并将您的代码复制粘贴到上面（我的内容区是

#主内容

，我的文件在

/includes

目录中）并将

ajaxify

类添加到链接中。我没有安装bookmarklet或chrome扩展，结果是加载了一个空白页面，但是如果我查看源代码，我可以看到链接到页面内容的链接。因此在现阶段无法实施。唯一的另一个异常是，我使用的是php（即索引页上的页眉和页脚等），不确定这是否会影响结果。@user1063287我在github上发布了一个示例（请参阅答案更新），希望这会对一些人有所帮助。我建议在实现php之前先运行一个简单的静态html版本。我已经下载了zip文件并在chrome（版本28.0.1500.95 m）中打开了index.html，点击菜单链接没有任何效果（没有以ajax样式或其他方式加载页面）。当我在firefox（23.0.1）中打开index.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>

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