使用ajax和history.pushState無刷新改變頁面URL範例_AJAX相關

這篇文章主要介紹了使用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瀏覽。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

關於Ajax技術原理的3點總結_AJAX相關

AJAX封裝類別使用指南

AJAX初級教程之初識AJAX

#

以上是使用ajax和history.pushState無刷新改變頁面URL範例_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章！