看似异步的页面加载

Question

我不知道该怎么称呼它，但在google plus中，当您导航到不同的页面时，HTTP地址会发生变化，但用户栏似乎保持静态而不是重新加载。发生了什么以及如何完成？

我希望这是有道理的！谢谢！

Answer 1

AJAX（异步加载内容）

内容正在异步加载，地址栏中的网址正在被更改。

异步加载内容的基本示例：

$.ajax({
    url: 'http://www.example.net/load.html',
    dataType: 'html',
    success: function(data){
        // This will replace all content in the body tag with what has been retrieved
        $('body').html(data);
    }
});

有关$.ajax()文档，请参阅here。

修改URL而不重定向

要通过重定向更改网址，您需要使用HTML5历史记录API。之前有人问过类似的问题，请参阅：

Modify the URL without reloading the page

提取答案：

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}

有关HTML5历史记录API的详细信息，请参阅here。

Answer 2

他们可能正在使用HTML5 History API，特别是pushState方法来添加新的历史记录状态。他们也可能使用Ajax（XHR）来加载新内容，然后通过DOM API将该内容添加到页面中。

查看pjax，这是一个为您完成大部分工作的图书馆。