本篇文章為大家展示了PushState+Ajax如何實現(xiàn)簡單的單頁面應(yīng)用SPA，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
單頁面應(yīng)用（Single Page Application）簡稱SPA，使用SPA構(gòu)建的應(yīng)用優(yōu)點有用戶體驗好、速度快，內(nèi)容的改變不需要重新加載整個頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染，從而相對減輕了服務(wù)器壓力，SPA在WEB移動端應(yīng)用非常廣泛。
今天我要給大家介紹的是使用HTML5的PushState+ajax實現(xiàn)不刷新整個頁面，而地址欄變換，頁面局部刷新的效果，綜合前后端頁面技術(shù)實現(xiàn)一個簡單的SPA。我們先來了解幾個知識點。
HTML5在History里增加了pushState方法，這個方法會將當(dāng)前的url添加到歷史記錄中，然后修改當(dāng)前url為新url。當(dāng)然這個方法只會修改地址欄的Url顯示，但并不會發(fā)出任何請求。因此我們可以利用這個方法結(jié)合ajax實現(xiàn)單頁面應(yīng)用SPA，就是PushState+Ajax，人稱Pjax。
pushstate的使用方法：
history.pushState(state, title, url)
state: 可以放任意你想放的數(shù)據(jù)，它將附加到新url上，作為該頁面信息的一個補充。
title: 顧名思義，就是document.title。
url: 新url，也就是你要顯示在地址欄上的url。
history.replaceState(state, title, url)
replaceState方法與pushState大同小異，區(qū)別只在于pushState會將當(dāng)前url添加到歷史記錄，之后再修改url，而replaceState只是修改url，不添加歷史記錄。
window.onpopstate
一般來說，每當(dāng)url變動時，popstate事件都會被觸發(fā)。但若是調(diào)用pushState來修改url，該事件則不會觸發(fā)，因此，我們可以把它用作瀏覽器的前進后退事件。該事件有一個參數(shù)，就是上文pushState方法的第一個參數(shù)state。
Pjax是一個優(yōu)秀的解決方案，它可以做：
可以在頁面切換間平滑過渡，增加Loading動畫?？梢栽诟鱾€頁面間傳遞數(shù)據(jù)，不依賴URL。可以選擇性的保留狀態(tài)，如音樂網(wǎng)站，切換頁面時不會停止播放歌曲。所有的標(biāo)簽都可以用來跳轉(zhuǎn)，不僅僅是a標(biāo)簽。避免了公共JS的反復(fù)執(zhí)行，減少了請求體積，節(jié)省流量，加快頁面響應(yīng)速度。對SEO也不會有影響，對于不支持HTML5的瀏覽器以及搜索引擎爬蟲，則可以跳轉(zhuǎn)真實的頁面。支持瀏覽器前進和后退按鈕。
1. 攔截a標(biāo)簽的默認(rèn)跳轉(zhuǎn)動作。
2. 使用Ajax請求新頁面。
3. 將返回的Html替換到頁面中。
4. 使用HTML5的History API或者Url的Hash修改Url。
HTML
我們設(shè)置一個菜單#nav，通過點擊菜單上的鏈接，將鏈接頁面對應(yīng)的內(nèi)容加載到p#result中。
pjax.js
首先在pjax.js中判斷瀏覽器對html5的支持情況，然后定義一個cache緩存對象：cache{}，定義設(shè)置cache和獲取cache的方法。然后定義event事件對象：event{}，綁定popstate和hashchange以及click事件，click事件會觸發(fā)調(diào)用pajax對象，請求頁面內(nèi)容。cache緩存對象和event事件對象的代碼大家可以下載源碼查看，本文由于篇幅原因只將核心pjax{}對象代碼粘出來。
var pjax = {
// Forward And Back，表示當(dāng)前操作是否由前進和后退觸發(fā)
fnb: false,
// 顯示新頁面內(nèi)容
show: function (title, html) {
document.title = title;
document.querySelector('#result').innerHTML = html;
},
//跳轉(zhuǎn)到指定頁面
jump: function (url, data, callback) {
// 如果是由前進后退觸發(fā)，則試著從緩存中獲取數(shù)據(jù)
if (pjax.fnb) {
var value = cache.get(url);
if (value !== null) {
pjax.show(value.title, value.html);
return;
}
}
document.querySelector('#result').innerHTML = '加載中...';
//ajax發(fā)送請求
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);
//不是前進和后退按鈕觸發(fā)
if(!pjax.fnb){
// 修改URL,URL地址欄會變換
if (support === 'HTML5') {
history.pushState(null, null, url);
} else {
var path = url.replace(location.protocol + "http://" + location.host, "");
location.hash = path;
}
// 添加到緩存
cache.set(url, {
title: title,
html: html
});
}
}else{
console.log('請求失?。?#39;);
}
pjax.fnb = true;
}
};
xhr.send();
},
init: function () {
event.bindEvent();
}
};
可以看出，pjax的核心部分是發(fā)送異步的ajax請求，調(diào)用html5的history.pushState() 方法，緩存頁面信息，已經(jīng)處理異步請求返回的結(jié)果。
最后調(diào)用：
pjax.init();
上述內(nèi)容就是PushState+Ajax如何實現(xiàn)簡單的單頁面應(yīng)用SPA，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
