幾種方法實現ajax請求內容時使用瀏覽器後退和前進功能

ajax是一個很是好玩的小東西，不過用起來也會存在一些問題。

咱們能夠利用ajax進行無刷新改變文檔內容，可是沒辦法去修改URL，即沒法實現瀏覽器的前進與後退、書籤的收藏功能。

利用location的hash部分和使用window.onhashchange來實現

hash就是uri中#及後面的部分，例如：www.google.com.hk#123的#123。當只有hash部分發生變化時，瀏覽器的歷史記錄會產生記錄，但不會向服務器發出請求，這時按後退鍵地址欄的uri會變化但頁面內容不變。

經過window.onhashchange事件來監聽hash值的更改。

ie六、7均不支持onhashchange，但能夠用setInterval按期檢查hash的改變，或者onload中檢查的方法

曾今經典場景：Gmail藉助ifram和hash實現前進和後退功能

而這樣的方式對搜索引擎是十分不友好的，twitter和google約定使用hash bang (#!xxx)，也就是hash後面的第一個字符爲感嘆號，這樣的網址他們是會爬取的，可是其餘搜索引擎不支持。

html5的history

在HTML4，Histroy對象有下面屬性方法：

• length：歷史堆棧中的記錄數。
• back()：返回上一頁。
• forward()：前進到下一頁。
• go([delta])：delta是個數字，若是不寫或爲0，則刷新本頁；若是爲正數，則前進到相應數目的頁面；若爲負數，則後退到相應數目的頁面。

在HTML5中，新增了兩個方法：

• pushState(data, title [, url])：往歷史堆棧的頂部添加一條記錄。data爲一個對象或null，它會在觸發window的popstate事件（window.onpopstate）時，做爲參數的state屬性傳遞過去；title爲頁面的標題，但當前全部瀏覽器都忽略這個參數；url爲頁面的URL，不寫則爲當前頁。
• replaceState(data, title [, url])：更改當前頁面的歷史記錄。參數同上。這種更改並不會去訪問該URL。

查看張鑫旭大神寫的例子。
具體場景實用解析http://www.cnblogs.com/accordion/p/5699372.html#top

瀏覽器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50
history.state	18	4.0 (2.0)	10	11.50

3、開源的PJAX庫

• welefen封裝的庫，對jquery、qwrap和kissy都作了封裝，github地址
• Yahoo團隊 PJAX地址

並非頁面中全部的連接都須要使用PJAX加載，全部在須要這個東西的a標籤上加一個屬性，如data-pjax=true，而後統一添加事件。