使用ajax和history.pushState無刷新改變頁面URL示例

表現

如果你使用chrome或者firefox等瀏覽器訪問本博客、github.com、plus.google.com等網站時，細心的你會發現頁面之間的點擊是通過ajax異步請求的，同時頁面的URL發生了了改變。并且能夠很好的支持瀏覽器前進和后退。

是什么有這么強大的功能呢？

HTML5里引用了新的API，history.pushState和history.replaceState，就是通過這個接口做到無刷新改變頁面URL的。

與傳統的AJAX的區別

傳統的ajax有如下的問題：

1、可以無刷新改變頁面內容，但無法改變頁面URL

2、為了更好的可訪問性，內容發生改變后，通常改變URL的hash

3、hash的方式不能很好的處理瀏覽器的前進、后退等問題！

4、進而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變

5、但這種方式對搜索引擎很不友好

6、twitter和google約定了使用#!xxx（即hash第一個字符為!），搜索引擎進行支持。

為了解決傳統ajax帶來的問題，HTML5里引入了新的API，即：history.pushState, history.replaceState

可以通過pushState和replaceState接口操作瀏覽器歷史，并且改變當前頁面的URL。

pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當前的URL。

如何使用

代碼如下:
<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);</strong>

state對象除了要title和url之外，你也可以添加其他的數據，比如：還想將一些發送ajax的配置給保存起來。

replaceState和pushState是相似的，這里就不多介紹了。
如何響應瀏覽器的前進、后退操作

window對象上提供了onpopstate事件，上面傳遞的state對象會成為event的子對象，這樣就可以拿到存儲的title和URL了。

代碼如下:
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);

這樣就可以結合ajax和pushState完美的進行無刷新瀏覽了。
一些限制

1、傳遞的URL必須是同域下的，無法跨域

2、state對象雖然可以存儲很多自定義的屬性，但對于不可序列化的對象則不能存儲，如：DOM對象。
對應后端的一些處理

這種模式下除了當前使用ajax可以無刷新瀏覽外，還要保證直接請求改變的URL后也可以正常瀏覽，所以后端要對這些處理下。

1、對使用pushState的ajax發送一個特殊的頭，如： setRequestHeader(‘PJAX', ‘true')。

2、后端獲取到有PJAX=true的header時，將頁面中通用的部分都不輸出。比如：PHP可以通過下面的判斷

代碼如下:
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

雖然接口上只有pushState、replaceState、onpopstate，但在使用的時候需要做很多的處理。

針對這個已經寫好了一個基于jquery的插件，接下來的文章會詳細介紹如何使用pjax(ajax+pushState)進行無刷新改變URL瀏覽。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com