Ajax保留瀏覽器歷史的兩種解決方案

總是在github down點東西，github整個界面做的不錯，體驗也很好~對於其中的源代碼滑動的特效最為喜歡了~剛開始以為這個只是普通的ajax請求效果，但是發現這個特效能夠導致瀏覽器地址欄跟隨變化，並且再點擊前進後退按鈕後又可以將代碼滑回滑出~~於是乎就來研究下吧~

一、通過錨點Hash實現：

在這方面其實國內很早就有做了，比如淘寶畫報，通過的是在地址欄後面加#錨點實現的，瀏覽器是可以識別錨點為單位的歷史記錄的。但不是說頁面本身有這個錨點，錨點的Hash只是起到一個引導瀏覽器將這次的記錄推入歷史記錄棧頂的作用。

來做一個小小的demo：

Tab1 Tab2

1

2

一個很簡單的Tab切換如果一般情況下就直接：

$("#tab1_header").click(function() { $("#tab2").hide(); $("#tab1").show();});$("#tab2_header").click(function() { $("#tab1").hide(); $("#tab2").show();});

我們把代碼改為這樣：

$(function(){showTab();$(window).bind( hashchange , function(e){showTab();});$("#tab1_header").click(showTab1);$("#tab2_header").click(showTab2);}); function showTab() { if (window.location.hash == "#tab2"){showTab2();} else {showTab1();} } function showTab1() { $("#tab2").hide(); $("#tab1").show(); window.location.hash = "#tab1"; }; function showTab2() { $("#tab1").hide(); $("#tab2").show(); window.location.hash = "#tab2"; };

二、通過HTML5加強型的History對象實現(類Pjax)

來模擬一下github的環境，github中每個url是對應一個完整的實際頁面的，所以在ajax請求頁面時需要非同步獲取target頁面中指定id容器中的內容：

比如有這樣兩個頁面：

index.html

index

載入前

second.html

second

載入後

假如用同步的http請求打開的話完全是兩個頁面，兩個頁面加入很多地方一樣的話我們完全可以用這種方法來實現ajax請求變更DOM，我在這裡加了語句通過它的變化能得知是否取自兩個http請求，局

部的ajax請求是不會改變這個時間顯示的。

$(function() { var state = { title: "index", url: "index.html" }; $("#cn").click(function() { window.history.pushState(state, "index", "second.html"); var $self = $(this); $.ajax({ url: "second.html", dataType: "html", complete: function(jqXHR, status, responseText) { responseText = jqXHR.responseText; if (jqXHR.isResolved()) { jqXHR.done(function(r) { responseText = r; }); $self.html($("

").append(responseText.replace(/

").append(responseText.replace(/

上面語句中當#cn元素被點擊時將state通過pushState方法壓入歷史記錄棧，並在第三個參數中將瀏覽器URL框中指向second頁面，並通過ajax將second頁面非同步載入，將相應的部分加入容器中，這樣就實現了非同步載入並改變地址欄url了，同樣用戶點擊後退時，觸發popstate，剛才pushState方法中的第一個參數state便是這裡傳入的形參e中的state屬性，通過var st = e.state取出供開發使用。同時載入index頁面中對應內容。時間有限這個js沒有進行重構，直接寫$.ajax了，其實假如不需要任何特效單純的非同步載入在jQ中可以直接用$("#cn").load(st.url + " #cn");將請求的html對應的#cn放到本頁面的#cn容器中，但加入要更加炫的特效的話就要直接操作ajax傳回的數據了。

$("#cn").html($("

").append(responseText.replace(/

先創建一個div容器在將經過script過濾過的代碼裝入這個容器在通過find方法找到裡面對應的選擇器容器插入本身的頁面中，這裡可以不用html來填充，可以根據自己的項目需要用slideUp，show什麼的特效進行內容顯示~~

另外這裡要推薦一個jQuery組件叫pjax（https://github.com/defunkt/jquery-pjax），比較牛叉的一個組件，非同步的部分load進來另外一個頁面對應容器中的內容，實現的機理和我上面的第二種方案一致。pushState + ajax = pjax 感覺這個應用會熱起來的。

稍微總結下，兩種方案其實對於想IE6或者FF3.6等比較低級的瀏覽器支持不是很好，前者若要兼容低端瀏覽器要用輪詢來監聽瀏覽器地址欄行為，而後者的話是完全的HTML5應用，對於非HTML5瀏覽器只能做判斷跳轉了。

如pjax最後的一段無奈的兼容處理：

$.support.pjax = window.history && window.history.pushState// Fall back to normalcy for older browsers.if ( !$.support.pjax ) { $.pjax = function( options ) { window.location = $.isFunction(options.url) ? options.url() : options.url } $.fn.pjax = function() { return this }}

via：http://leyteris.iteye.com/blog/1107597

最近熱文：

1、邀你參加11期 程序員專場相親活動

2、PHP高工/架構師，18-50K，深圳南山

3、JAVA/Web前端，深圳前海，15-30K

4、如何判斷是否到了該辭職的時候？

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！