Lifehacker使用Ajax实现url更改

我看到Lifehacker能够在使用AJAX更新部分页面时更改URL.我想这可以使用HTML5或history.js插件实现,但我想lifehacker既不使用也不使用.

有没有人知道他们是怎么做到的？我是AJAX的新手,只是设法使用Ajax更新页面的一部分.

谢谢@Robin Anderson详细的逐步算法.我试了一下它工作正常.但是,在我可以在生产中测试它之前,我想用你运行我的代码.我做对了吗？

PS:我不知道如何在评论中粘贴代码,所以我在这里添加了它.

为了在浏览器中使用历史API,即使它是HTML5功能,也不要求将标记设置为HTML5.

使用AJAX加载所有页面转换的一个非常快速和简单的实现是:

挂起所有链接,除了rel ="external"存在于函数"ChangePage"

触发ChangePage时,请检查浏览器是否支持历史记录API.

如果不支持历史记录API,请按下主题标签或将正常的整页加载作为后备.

如果支持历史记录API:

防止正常的链接行为.

将新URL推送到浏览器历史记录.

向新URL发出AJAX请求并获取其内容.

在响应中查找您的内容div(或类似元素),从中获取HTML并将当前页面上相应元素的HTML替换为新元素.

这将很容易实现,易于管理缓存并与Google的机器人配合良好,缺点是不是"优化",当您更改时,它将是响应的一些开销(与更复杂的解决方案相比)页面.

也将具有向后兼容性,因此旧版浏览器或"非JavaScript访问者"将获得正常的页面加载.

关于这个主题的有趣链接

不同浏览器中的历史API兼容性

Mozillas History API的文档

编辑:

值得一提的另一件事是你不应该将它与ASP .Net Web Forms应用程序一起使用,可能会搞砸回发处理.

代码添加:

我已经整理了一个这个功能的小演示,你可以在这里找到.

它只是使用HTML,Javascript(jQuery)和一小部分CSS,我建议你在使用之前测试它.但是我已经在Chrome中检查了一些它似乎工作正常.

我建议的一些测试是:

在优秀的浏览器,Chrome和Firefox中进行测试.

在IE7等传统浏览器中进行测试

在没有启用Javascript的情况下测试它(只需安装Noscript或类似于Chrome/Firefox)

这是我用来实现这个的javascript,您可以在上面的演示中找到完整的源代码.

/*
    The arguments are:          
        url: The url to pull new content from
        doPushState: If a new state should be pushed to the browser, true on links and false on normal state changes such as forward and back.
*/
function changePage(url, doPushState, defaultEvent)
{
    if (!history.pushState) { //Compatability check
        return true; //pushState isn't supported, fallback to normal page load
    }

    if (defaultEvent != null) { 
        defaultEvent.preventDefault(); //Someone passed in a default event, stop it from executing
    }

    if (doPushState) {  //If we are supposed to push the state or not
        var stateObj = { type: "custom" }; 
        history.pushState(stateObj, "Title", url); //Push the new state to the browser
    }               

    //Make a GET request to the url which was passed in
    $.get(url, function(response) {             
        var newContent = $(response).find(".content");      //Find the content section of the response
        var contentWrapper = $("#content-wrapper");         //Find the content-wrapper where we are supposed to change the content.
        var oldContent = contentWrapper.find(".content");   //Find the old content which we should replace.

        oldContent.fadeOut(300, function() { //Make a pretty fade out of the old content
            oldContent.remove(); //Remove it once it is done
            contentWrapper.append(newContent.hide()); //Add our new content, hidden
            newContent.fadeIn(300); //Fade it in!
        });

    });
}


//We hook up our events in here
$(function() {
    $(".generated").html(new Date().getTime()); //This is just to present that it's actually working.

    //Bind all links to use our changePage function except rel="external"
    $("a[rel!='external']").live("click", function (e) { 
        changePage($(this).attr("href"), true, e);
    });

    //Bind "popstate", it is the browsers back and forward
    window.onpopstate = function (e) { 
        if (e.state != null) {
            changePage(document.location, false, null); 
        }
    }
});