看似異步頁面加載

Question

我不知道該怎么稱呼它，但是在google plus中，當您導航到其他頁面時，HTTP地址會更改，但用戶欄似乎保持不變，不會重新加載。 發生了什么事以及如何完成？

我希望這是有道理的！ 謝謝！

Answer 1

AJAX（異步加載內容）

內容正在異步加載，地址欄中的url已更改。

異步加載內容的基本示例：

$.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()文檔的信息，請參見此處 。

修改URL而無需重定向

要通過重定向更改網址，您需要使用HTML5歷史記錄API。 之前有人在這里問過類似的問題，請參閱：

修改URL而無需重新加載頁面

提取答案：

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的更多信息，請參見此處 。

Answer 2

他們可能正在使用HTML5歷史記錄API ，特別是pushState方法來添加新的歷史記錄狀態。 他們還可能使用Ajax（ XHR ）加載新內容，然后通過DOM API將其添加到頁面中。

查看pjax ，這是一個為您處理大部分工作的庫。