看似异步的页面加载 - Seemingly Asynchronous Page Load

Seemingly Asynchronous Page Load

本文关键字：加载异步 | 更新日期: 2023-09-27

我不知道该怎么称呼它，但在google plus中，当你导航到不同的页面时，HTTP地址会发生变化，但用户栏似乎保持静态，不会重新加载。发生了什么?如何做到这一点?

我希望这有意义!谢谢你！

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

要在不重定向的情况下更改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 History API的更多信息，请参见这里

很可能他们正在使用HTML5历史API，特别是pushState方法来添加新的历史状态。他们也可能使用Ajax (XHR)来加载新内容，然后通过DOM API将这些内容添加到页面中。

查看pjax，它是一个库，可以为您处理大部分的问题。