使用ajax和js無刷新改變頁面內容和地址欄URL

發現一個能夠改變地址欄，而不致使頁面刷新的東東。 Chrome, FF測試經過，不支持IE.

實現目標

1. 頁面的跳轉（前進後退，點擊等）不從新請求頁面
2. 頁面URL與頁面展示內容一致（符合人們對傳統網頁的認識）
3. 在不支持的瀏覽器降低級成傳統網頁的方式

使用到的API

history.state

當前URL下對應的狀態信息。若是當前URL不是經過pushState或者replaceState產生的，那麼history.state是null。

history.pushState(state, title, url)

將當前URL和history.state加入到history中，並用新的state和URL替換當前。不會形成頁面刷新。

state：與要跳轉到的URL對應的狀態信息。

title：不知道幹啥用，傳空字符串就好了。

url：要跳轉到的URL地址，不能跨域。

history.replaceState

用新的state和URL替換當前。不會形成頁面刷新。

state：與要跳轉到的URL對應的狀態信息。

title：不知道幹啥用，傳空字符串就好了。

url：要跳轉到的URL地址，不能跨域。

window.onpopstate

history.go和history.back（包括用戶按瀏覽器歷史前進後退按鈕）觸發，而且頁面無刷的時候（因爲使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state。經過event.state也能夠獲取history.state。

支持性判斷

if ('pushState' in history) {...}

實現思路

用戶經過「點擊觸發」，「操做歷史」，「直接訪問URL」的方式修改當前URL。這三種觸發方式會使瀏覽器作出不一樣的行爲。若是頁面作無刷跳轉，那麼頁面具體顯示什麼內容須要js來控制，js則須要根據一些信息來知道當前應該顯示什麼內容，這個信息就是history.state。這樣咱們只要保持URL和history.state一一對應，就能保證URL和內容一一對應。大部分狀況下URL和history.state都是一一對應的，但經過直接URL訪問頁面的方式進入頁面，history.state是null，因此咱們須要把URL轉換成對應的history.state寫入。咱們不能直接寫入history.state，須要經過replaceState的方式寫入。對於不支持pushstate的瀏覽器，一概修改href跳轉頁面，等同於直接訪問URL。示意圖以下。

 

原地址連接： http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html

 

 

 

---

 

分割線

---

 

 

jquery.history 能夠提供更好的兼容性（下載地址）：http://files.cnblogs.com/files/08shiyan/jquery.histroy.zip

用法很簡單:

    /*
    * 替換當前url 並不致使瀏覽器頁面刷新
    * name 參數名
    * value 參數值
    */
     function replaceUrl  (name, value) {        
        var obj = new Object();
        obj[name] = value;
        obj.rand = Math.random();
        History.replaceState(obj, '', '?' + name + '=' + value);
    }