PushState+Ajax實現簡單的單頁面應用SPA

http://www.helloweba.com/view-blog-386.html

單頁面應用（Single Page Application）簡稱SPA，使用SPA構建的應用優勢有用戶體驗好、速度快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染，從而相對減輕了服務器壓力，SPA在WEB移動端應用很是普遍。

咱們在上一篇文章Javascript實現前端簡單路由中提到的前端路由，能夠在不刷新整個頁面的狀況下，經過變換地址欄的hash來實現頁面局部加載。

今天我要給你們介紹的是使用HTML5的PushState+ajax實現不刷新整個頁面，而地址欄變換，頁面局部刷新的效果，綜合先後端頁面技術實現一個簡單的SPA。咱們先來了解幾個知識點。

HTML5 History API

HTML5在History裏增長了pushState方法，這個方法會將當前的url添加到歷史記錄中，而後修改當前url爲新url。固然這個方法只會修改地址欄的Url顯示，但並不會發出任何請求。所以咱們能夠利用這個方法結合ajax實現單頁面應用SPA，就是PushState+Ajax，人稱Pjax。

pushstate的使用方法：

history.pushState(state, title, url)

state: 能夠聽任意你想放的數據，它將附加到新url上，做爲該頁面信息的一個補充。

title: 顧名思義，就是document.title。

url: 新url，也就是你要顯示在地址欄上的url。

history.replaceState(state, title, url)

replaceState方法與pushState大同小異，區別只在於pushState會將當前url添加到歷史記錄，以後再修改url，而replaceState只是修改url，不添加歷史記錄。

window.onpopstate

通常來講，每當url變更時，popstate事件都會被觸發。但如果調用pushState來修改url，該事件則不會觸發，所以，咱們能夠把它用做瀏覽器的前進後退事件。該事件有一個參數，就是上文pushState方法的第一個參數state。

Pjax能作什麼

Pjax是一個優秀的解決方案，它能夠作：

• 能夠在頁面切換間平滑過渡，增長Loading動畫。
• 能夠在各個頁面間傳遞數據，不依賴URL。
• 能夠選擇性的保留狀態，如音樂網站，切換頁面時不會中止播放歌曲。
• 全部的標籤均可以用來跳轉，不單單是a標籤。
• 避免了公共JS的反覆執行，減小了請求體積，節省流量，加快頁面響應速度。
• 對SEO也不會有影響，對於不支持HTML5的瀏覽器以及搜索引擎爬蟲，則能夠跳轉真實的頁面。
• 支持瀏覽器前進和後退按鈕。

實現原理

1. 攔截a標籤的默認跳轉動做。

2. 使用Ajax請求新頁面。

3. 將返回的Html替換到頁面中。

4. 使用HTML5的History API或者Url的Hash修改Url。

代碼實現

HTML

咱們設置一個菜單#nav，經過點擊菜單上的連接，將連接頁面對應的內容加載到div#result中。

<ul id="nav">  
    <li><a href="home.html">首頁</a></li>  
    <li><a href="product.html">產品</a></li>  
    <li><a href="server.php" title="服務">服務</a></li>  
</ul> 
<div id="result"></div>

pjax.js

首先在pjax.js中判斷瀏覽器對html5的支持狀況，而後定義一個cache緩存對象：cache{}，定義設置cache和獲取cache的方法。而後定義event事件對象：event{}，綁定popstate和hashchange以及click事件，click事件會觸發調用pajax對象，請求頁面內容。cache緩存對象和event事件對象的代碼你們能夠下載源碼查看，本文因爲篇幅緣由只將核心pjax{}對象代碼粘出來。

var pjax = { 
    // Forward And Back，表示當前操做是否由前進和後退觸發 
    fnb: false, 
    // 顯示新頁面內容 
    show: function (title, html) { 
        document.title = title; 
        document.querySelector('#result').innerHTML = html; 
    }, 
 
    //跳轉到指定頁面 
    jump: function (url, data, callback) { 
         
        // 若是是由前進後退觸發，則試着從緩存中獲取數據 
        if (pjax.fnb) { 
            var value = cache.get(url); 
            if (value !== null) { 
                pjax.show(value.title, value.html); 
                return; 
            } 
        } 
 
 
        document.querySelector('#result').innerHTML = '加載中...'; 
        //ajax發送請求 
        var xhr = new XMLHttpRequest(); 
 
        xhr.open("GET", url, true); 
        xhr.setRequestHeader("X-PJAX", "true"); 
        xhr.setRequestHeader("X-PJAX-TITLE", data); 
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
        xhr.onreadystatechange = function(){ 
            if(xhr.readyState === 4){ 
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){ //304是緩存 
                    var html = xhr.responseText, 
                        title = xhr.getResponseHeader("X-PJAX-TITLE"); 
                    if(title==null){ 
                        title = document.title; 
                    }else{ 
                        title = decodeURI(title); 
                    } 
                    //console.log(title); 
                     
                    // 顯示新頁面 
                    pjax.show(title, html); 
 
                    //不是前進和後退按鈕觸發 
                    if(!pjax.fnb){ 
                        // 修改URL,URL地址欄會變換 
                        if (support === 'HTML5') { 
                            history.pushState(null, null, url); 
                        } else { 
                            var path = url.replace(location.protocol + "//" + location.host, ""); 
                            location.hash = path; 
                        } 
                        // 添加到緩存 
                        cache.set(url, { 
                            title: title, 
                            html: html 
                        }); 
                    } 
 
                }else{ 
                    console.log('請求失敗！'); 
                } 
                pjax.fnb = true; 
            } 
        }; 
        xhr.send(); 
    }, 
 
    init: function () { 
        event.bindEvent(); 
    } 
};

能夠看出，pjax的核心部分是發送異步的ajax請求，調用html5的history.pushState() 方法，緩存頁面信息，已經處理異步請求返回的結果。

最後調用：

pjax.init();