JavaScript庫(kù)hxsfx.ajax之解決動(dòng)態(tài)加載HTML

前言

最近寫(xiě)博客真的是太痛苦了，倒不是寫(xiě)博客本身，而是寫(xiě)完之后往多個(gè)平臺(tái)發(fā)布的過(guò)程，一不注意就是十多分鐘往上的時(shí)間消耗。

為了解決這個(gè)問(wèn)題，之前立項(xiàng)的“解決自媒體一鍵多平臺(tái)發(fā)布”項(xiàng)目必須得立刻著手完善了，爭(zhēng)取早日讓自己從發(fā)布這件事情上解脫出來(lái)專心寫(xiě)文章。

【hxsfx的JavaScript庫(kù)】這個(gè)系列基本上是為“一鍵多平臺(tái)發(fā)布”項(xiàng)目打基礎(chǔ)用的。之所以把各個(gè)功能模塊拆分出來(lái)，是為了盡量讓小伙伴能夠復(fù)制即用（在兼容性方面，因?yàn)閭€(gè)人能力的原因，幾乎只會(huì)兼容Chrome瀏覽器）。

hxsfx.ajax庫(kù)

（一）介紹

AJAX 是異步的 JavaScript 和 XML（Asynchronous JavaScript And XML），開(kāi)發(fā)hxsfx.ajax庫(kù)的主要目的就是希望通過(guò)異步加載HTML，從而盡量避免直接在js中寫(xiě)HTML來(lái)刷新頁(yè)面內(nèi)容。
hxsfx.ajax這個(gè)庫(kù)與jquery的ajax功能基本一致，不過(guò)短時(shí)間內(nèi)應(yīng)該是寫(xiě)不到人家那么完善的。哈哈~
各位小伙伴別問(wèn)，為什么不用jquery的ajax而要自己再寫(xiě)一個(gè)呢？
問(wèn)就是，博主喜歡造輪子。開(kāi)玩笑了~
其實(shí)原因是為了減少三方庫(kù)的依賴，達(dá)到對(duì)項(xiàng)目的全面掌控。
項(xiàng)目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代碼

要自己開(kāi)發(fā)一個(gè)ajax庫(kù)，需要借助Web API接口中的XMLHttpRequest（XHR）對(duì)象。

XMLHttpRequest（XHR）對(duì)象用于與服務(wù)器交互。通過(guò) XMLHttpRequest 可以在不刷新頁(yè)面的情況下請(qǐng)求特定 URL，獲取數(shù)據(jù)。這允許網(wǎng)頁(yè)在不影響用戶操作的情況下，更新頁(yè)面的局部?jī)?nèi)容。

1、在window對(duì)象上新建一個(gè)hxsfx對(duì)象，本系列的所有庫(kù)基本都會(huì)在hxsfx對(duì)象之中：

//hxsfx.js
(function () {
    window.hxsfx = {};
})();

2、在hxsfx對(duì)象的基礎(chǔ)上新建一個(gè)ajax對(duì)象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
    };
})();

3、在ajax對(duì)象中新建loadHTML方法，設(shè)置兩個(gè)參數(shù)，分別是ele準(zhǔn)備加載HTML的容器元素和url加載HTML的地址：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
        }
    };
})();

4、在loadHTML方法中新建XMLHttpRequest對(duì)象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //為了讓代碼更健壯，使用try...catch來(lái)捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                              //在這處理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異?！? + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

5、為了解決加載HTML緩存的問(wèn)題，將loadHTML方法中傳入的URL參數(shù)后面加上一個(gè)時(shí)間戳：

//ajax.js
//時(shí)間戳用來(lái)解決加載頁(yè)面緩存的問(wèn)題
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

6、【重點(diǎn)】在這處理返回的HTML時(shí)，如果直接將HTML加載到容器中，會(huì)出現(xiàn)HTML中Javascript代碼不執(zhí)行的問(wèn)題。解決這個(gè)問(wèn)題，需要將加載的script標(biāo)簽替換為script元素：

//ajax.js
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
    var scriptElement = document.createElement("script");
    scriptElement.setAttribute("type", "text/javascript");
    var src = scriptElements[i].getAttribute("src");
    if (src) {
        //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁(yè)面的，需要修改為當(dāng)前頁(yè)面的引用路徑
        src = url.substring(0, url.lastIndexOf('/') + 1) + src;
        src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
        scriptElement.setAttribute("src", src);
    }
    var scriptContent = scriptElements[i].innerHTML;
    if (scriptContent) {
        scriptElement.innerHTML = scriptContent;
    }
    //用生成的script元素去替換html中的script標(biāo)簽，以此來(lái)激活script代碼
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代碼：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //時(shí)間戳用來(lái)解決加載頁(yè)面緩存的問(wèn)題
            var urlTimeStamp = "timeStamp=" + new Date().getTime();
            url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //為了讓代碼更健壯，使用try...catch來(lái)捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                            ele.innerHTML = httpRequest.responseText;
                            var scriptElements = ele.getElementsByTagName("script");
                            for (var i = 0; i < scriptElements.length; i++) {
                                var scriptElement = document.createElement("script");
                                scriptElement.setAttribute("type", "text/javascript");
                                var src = scriptElements[i].getAttribute("src");
                                if (src) {
                                    //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁(yè)面的，需要修改為當(dāng)前頁(yè)
                                    src = url.substring(0, url.lastIndexOf('/') + 1) + src;
                                    src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                                    scriptElement.setAttribute("src", src);
                                }
                                var scriptContent = scriptElements[i].innerHTML;
                                if (scriptContent) {
                                    scriptElement.innerHTML = scriptContent;
                                }
                                //用生成的script元素去替換html中的script標(biāo)簽，以此來(lái)激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異?！? + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）調(diào)用文檔

1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾

2、在Scripts文件夾同級(jí)目錄新建index.html頁(yè)面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js庫(kù)測(cè)試</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload = function () {
                //調(diào)用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>

3、在Scripts文件夾同級(jí)目錄，首先新建Views文件夾，接著其中新建test文件夾，最后在test文件夾中新建testPage.html

<style>
    div#TestPageContainer {
        height: 300px;
        width: 300px;
        background-color: #F0F0F0;
    }
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
    function updateBackgroundColor() {
        try {
            var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
            document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
        }
        catch (ex) {
            console.log(ex.message);
        }
    }
</script>
<div id="TestPageContainer">
    <button onclick="updateBackgroundColor()">更改背景色</button>
    <button onclick="modifyPFontColor()">更改下面一句話的字體顏色</button>
    <p id="P">這兒是一句話。</p>
</div>

最后

以上內(nèi)容只是hxsfx.ajax庫(kù)的開(kāi)始，后續(xù)的內(nèi)容更新小伙伴可以通過(guò)訪問(wèn)Github項(xiàng)目地址進(jìn)行獲取。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容