PushState+Ajax如何實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用SPA-創(chuàng)新互聯(lián)

本篇文章為大家展示了PushState+Ajax如何實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用SPA，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)陽(yáng)高免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

單頁(yè)面應(yīng)用（Single Page Application）簡(jiǎn)稱SPA，使用SPA構(gòu)建的應(yīng)用優(yōu)點(diǎn)有用戶體驗(yàn)好、速度快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染，從而相對(duì)減輕了服務(wù)器壓力，SPA在WEB移動(dòng)端應(yīng)用非常廣泛。

今天我要給大家介紹的是使用HTML5的PushState+ajax實(shí)現(xiàn)不刷新整個(gè)頁(yè)面，而地址欄變換，頁(yè)面局部刷新的效果，綜合前后端頁(yè)面技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的SPA。我們先來了解幾個(gè)知識(shí)點(diǎn)。

HTML5 History API

HTML5在History里增加了pushState方法，這個(gè)方法會(huì)將當(dāng)前的url添加到歷史記錄中，然后修改當(dāng)前url為新url。當(dāng)然這個(gè)方法只會(huì)修改地址欄的Url顯示，但并不會(huì)發(fā)出任何請(qǐng)求。因此我們可以利用這個(gè)方法結(jié)合ajax實(shí)現(xiàn)單頁(yè)面應(yīng)用SPA，就是PushState+Ajax，人稱Pjax。

pushstate的使用方法：

history.pushState(state, title, url)

state: 可以放任意你想放的數(shù)據(jù)，它將附加到新url上，作為該頁(yè)面信息的一個(gè)補(bǔ)充。

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

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

history.replaceState(state, title, url)

replaceState方法與pushState大同小異，區(qū)別只在于pushState會(huì)將當(dāng)前url添加到歷史記錄，之后再修改url，而replaceState只是修改url，不添加歷史記錄。

window.onpopstate

一般來說，每當(dāng)url變動(dòng)時(shí)，popstate事件都會(huì)被觸發(fā)。但若是調(diào)用pushState來修改url，該事件則不會(huì)觸發(fā)，因此，我們可以把它用作瀏覽器的前進(jìn)后退事件。該事件有一個(gè)參數(shù)，就是上文pushState方法的第一個(gè)參數(shù)state。

Pjax能做什么

Pjax是一個(gè)優(yōu)秀的解決方案，它可以做：

  • 可以在頁(yè)面切換間平滑過渡，增加Loading動(dòng)畫?？梢栽诟鱾€(gè)頁(yè)面間傳遞數(shù)據(jù)，不依賴URL?？梢赃x擇性的保留狀態(tài)，如音樂網(wǎng)站，切換頁(yè)面時(shí)不會(huì)停止播放歌曲。所有的標(biāo)簽都可以用來跳轉(zhuǎn)，不僅僅是a標(biāo)簽。避免了公共JS的反復(fù)執(zhí)行，減少了請(qǐng)求體積，節(jié)省流量，加快頁(yè)面響應(yīng)速度。對(duì)SEO也不會(huì)有影響，對(duì)于不支持HTML5的瀏覽器以及搜索引擎爬蟲，則可以跳轉(zhuǎn)真實(shí)的頁(yè)面。支持瀏覽器前進(jìn)和后退按鈕。


    • 實(shí)現(xiàn)原理

    1. 攔截a標(biāo)簽的默認(rèn)跳轉(zhuǎn)動(dòng)作。

    2. 使用Ajax請(qǐng)求新頁(yè)面。

    3. 將返回的Html替換到頁(yè)面中。

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

    代碼實(shí)現(xiàn)

    HTML

    我們?cè)O(shè)置一個(gè)菜單#nav，通過點(diǎn)擊菜單上的鏈接，將鏈接頁(yè)面對(duì)應(yīng)的內(nèi)容加載到p#result中。

    <ul id="nav"> <li><a href="home.html">首頁(yè)</a></li> <li><a href="product.html">產(chǎn)品</a></li> <li><a href="server.php" title="服務(wù)">服務(wù)</a></li> </ul> <p id="result"></p>

    pjax.js

    首先在pjax.js中判斷瀏覽器對(duì)html5的支持情況，然后定義一個(gè)cache緩存對(duì)象：cache{}，定義設(shè)置cache和獲取cache的方法。然后定義event事件對(duì)象：event{}，綁定popstate和hashchange以及click事件，click事件會(huì)觸發(fā)調(diào)用pajax對(duì)象，請(qǐng)求頁(yè)面內(nèi)容。cache緩存對(duì)象和event事件對(duì)象的代碼大家可以下載源碼查看，本文由于篇幅原因只將核心pjax{}對(duì)象代碼粘出來。

    var pjax = { // Forward And Back，表示當(dāng)前操作是否由前進(jìn)和后退觸發(fā)    fnb: false, // 顯示新頁(yè)面內(nèi)容 show: function (title, html) { document.title = title; document.querySelector('#result').innerHTML = html; }, //跳轉(zhuǎn)到指定頁(yè)面 jump: function (url, data, callback) { // 如果是由前進(jìn)后退觸發(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ā)送請(qǐng)求 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);            // 顯示新頁(yè)面    pjax.show(title, html);    //不是前進(jìn)和后退按鈕觸發(fā)    if(!pjax.fnb){    // 修改URL,URL地址欄會(huì)變換                        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('請(qǐng)求失?。?#39;);        }        pjax.fnb = true;        }        };        xhr.send(); }, init: function () { event.bindEvent(); } };

    可以看出，pjax的核心部分是發(fā)送異步的ajax請(qǐng)求，調(diào)用html5的history.pushState() 方法，緩存頁(yè)面信息，已經(jīng)處理異步請(qǐng)求返回的結(jié)果。

    最后調(diào)用：

    pjax.init();

上述內(nèi)容就是PushState+Ajax如何實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用SPA，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：PushState+Ajax如何實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用SPA-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article2/dgoooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站、外貿(mào)建站、域名注冊(cè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司