使用ajax和history.pushState無重新整理改變頁面URL

http://www.welefen.com/use-ajax-and-pushstate.html
表現

如果你使用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。 如何使用

1 2 3 4 5 6

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了。

1 2 3 4 5 6

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可以通過下面的判斷

1 2 3

function is_pjax(){      return array_key_exists ( 'HTTP_X_PJAX' , $_SERVER ) && $_SERVER [ 'HTTP_X_PJAX' ] === 'true' ; }

 

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

針對這個已經寫好了一個基於jquery的外掛程式，接下來的文章會詳細介紹如何使用pjax(ajax+pushState)進行無重新整理改變URL瀏覽。

@update – 2012.03.06

已經將ajax+history.pushState封裝成pjax, 項目地址： https://github.com/welefen/pjax， 目前支援jquery, qwrap, kissy 3個版本

<script type="text/javascript">        $(function () {            window.onpopstate = function (e) {                //點擊瀏覽器的前進後退按鈕處理                if (e.state) {                    document.title = e.state.title;                    $.ajax({                        type: "get",                        url: e.state.url,                        success: function (data) {                            $("#page").html(data)                        },                        error: function (data) {                        }                    })                }            }            $("a").click(function () {                var _href = $(this).attr("href");                $.ajax({                    type: "get",                    url: _href,                    success: function (data) {                        //加入到曆史狀態裡面                        var state = {                            title: data,                            url: _href,                            otherkey: null                        };                        history.pushState(state, data, _href );                                                $("#page").html(data)                    },                    error: function (data) {                    }                })                return false;            })        })    </script>