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

本篇文章為大家展示了PushState+Ajax如何實現簡單的單頁面應用SPA，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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

今天我要給大家介紹的是使用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，通過點擊菜單上的鏈接，將鏈接頁面對應的內容加載到p#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> <p id="result"></p>

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();

上述內容就是PushState+Ajax如何實現簡單的單頁面應用SPA，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。