本文主要詳細介紹了使用ajax和window.history.pushState無刷新改變頁面內容和地址欄URL的方法,需要的朋友可以參考下
在訪問現在很火的google plus時，細心的使用者也許會發現頁面之間的點擊是透過ajax非同步請求的，同時頁面的URL發生了改變。並且能夠很好的支援瀏覽器的前進和後退。不禁讓人想問，是什麼有這麼強大的功能呢？
HTML5裡引用了新的API，就是history.pushState和history.replaceState，就是透過這個介面做到無刷新改變頁面URL的。
與傳統的AJAX的區別
傳統的ajax有如下的問題：
#雖然ajax可以無刷新改變頁面內容，但無法改變頁面URL
其次為了更好的可訪問性，內容改變後，改變URL的hash。但是hash的方式不能很好的處理瀏覽器的前進、後退等問題
有的瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變
再有，ajax的使用對搜尋引擎很不友好，往往蜘蛛爬到的區域是空的
為了解決傳統ajax帶來的問題，HTML5裡引入了新的API，即：history .pushState, history.replaceState
可以透過pushState和replaceState介面操作瀏覽器歷史，並且改變目前頁面的URL。
pushState是將指定的URL加入瀏覽器歷史裡，replaceState是將指定的URL取代目前的URL。
如何呼叫
var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);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、無法跨域，這個是必然的。引用曾經在網路上看到的一句經典的話：「如果javascript可以跨域的話，那他就可以逆天了！」
2、state物件雖然可以儲存很多自訂的屬性，但值不能是個對象。
對應後端的一些處理
這種模式下除了目前使用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，但在使用的時候還是要做很多處理的。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是使用ajax實現無刷新改變頁面內容和網址列URL的詳細內容。更多資訊請關注PHP中文網其他相關文章！
