使用ajax和history.pushState無刷新改變頁面URL示例
表現(xiàn)
如果你使用chrome或者firefox等瀏覽器訪問本博客、github.com、plus.google.com等網(wǎng)站時，細(xì)心的你會發(fā)現(xiàn)頁面之間的點擊是通過ajax異步請求的，同時頁面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器前進(jìn)和后退。
是什么有這么強(qiáng)大的功能呢？
HTML5里引用了新的API，history.pushState和history.replaceState，就是通過這個接口做到無刷新改變頁面URL的。
與傳統(tǒng)的AJAX的區(qū)別
傳統(tǒng)的ajax有如下的問題：
1、可以無刷新改變頁面內(nèi)容，但無法改變頁面URL
2、為了更好的可訪問性，內(nèi)容發(fā)生改變后，通常改變URL的hash
3、hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問題！
4、進(jìn)而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變
5、但這種方式對搜索引擎很不友好
6、twitter和google約定了使用#!xxx（即hash第一個字符為!），搜索引擎進(jìn)行支持。
為了解決傳統(tǒng)ajax帶來的問題，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通過pushState和replaceState接口操作瀏覽器歷史，并且改變當(dāng)前頁面的URL。
pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當(dāng)前的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之外，你也可以添加其他的數(shù)據(jù)，比如：還想將一些發(fā)送ajax的配置給保存起來。
replaceState和pushState是相似的，這里就不多介紹了。
如何響應(yīng)瀏覽器的前進(jìn)、后退操作
window對象上提供了onpopstate事件，上面?zhèn)鬟f的state對象會成為event的子對象，這樣就可以拿到存儲的title和URL了。
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);
這樣就可以結(jié)合ajax和pushState完美的進(jìn)行無刷新瀏覽了。
一些限制
1、傳遞的URL必須是同域下的，無法跨域
2、state對象雖然可以存儲很多自定義的屬性，但對于不可序列化的對象則不能存儲，如：DOM對象。
對應(yīng)后端的一些處理
這種模式下除了當(dāng)前使用ajax可以無刷新瀏覽外，還要保證直接請求改變的URL后也可以正常瀏覽，所以后端要對這些處理下。
1、對使用pushState的ajax發(fā)送一個特殊的頭，如： 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，但在使用的時候需要做很多的處理。
針對這個已經(jīng)寫好了一個基于jquery的插件，接下來的文章會詳細(xì)介紹如何使用pjax(ajax+pushState)進(jìn)行無刷新改變URL瀏覽。
相關(guān)文章
最近學(xué)習(xí)js，肯定會學(xué)到ajax中的東西，所以，看到比較好的ajax函數(shù)，免不得要貼出來，供大家參考。這個函數(shù)摘錄自john resig的書中。2009-09-09
本文主要總結(jié)整理Ajax的一些常用的基礎(chǔ)知識，非常適合初學(xué)者。需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
在本篇文章里小編給大家整理了一篇關(guān)于ajax和fetch的區(qū)別點總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
AJAX的原理—如何做到異步和局部刷新【實現(xiàn)代碼】
如何做到異步和局部刷新？下面小編就為大家?guī)硪黄狝JAX的原理—如何做到異步和局部刷新【實現(xiàn)代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
如何解決Ajax的content-download時間過慢問題
這篇文章主要介紹了Ajax的content-download時間過慢問題的解決方法及思考過程，本文通過事件背景，過程分析，給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
Ajax通過XML異步提交的方法實現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實現(xiàn)二級聯(lián)動(xml方法)
這篇文章主要介紹了Ajax通過XML異步提交的方法實現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實現(xiàn)二級聯(lián)動(xml方法)的相關(guān)資料,我們要根據(jù)異步提交，局部刷新的思想來實現(xiàn)來提高用戶交互問題，對ajax二級聯(lián)動效果感興趣的朋友一起看看吧2016-11-11
使用AJAX進(jìn)行WEB應(yīng)用程序開發(fā)的方法
AJAX，一個異步JavaScript和XML的縮略詞，是最近出來的技術(shù)詞語。異步意味著你可以經(jīng)由超文本傳輸協(xié)議(HTTP)向一個服務(wù)器發(fā)出請求并且在等待該響應(yīng)時繼續(xù)處理另外的數(shù)據(jù)。2010-04-04
這篇文章主要介紹了全面解析Ajax和jsonp使用總結(jié) 的相關(guān)資料,需要的朋友可以參考下2017-10-10
AJAX初體驗之上手篇...2006-07-07
Razor功能非常強(qiáng)大，但是本身并不能做到無刷新，所以需要配合ajax使用。本文通過一個例子給大家介紹使用Ajax局部更新Razor頁面，需要的朋友參考下吧2017-09-09