首页 > 社交 > 科普中国

JavaScript库hxsfx.ajax之解决动态加载HTML

常驻编辑 科普中国 2022-10-13 加载   缓存   文件夹   元素   异常   对象   代码   页面   时间   项目   动态
//ajax.js
//时间戳用来解决加载页面缓存的问题
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

6、【重点】在这处理返回的HTML时,如果直接将HTML加载到容器中,会出现HTML中Javascript代码不执行的问题。解决这个问题,需要将加载的script标签替换为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) {
        //因为加载的src路径是之前相对加载HTML页面的,需要修改为当前页面的引用路径
        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标签,以此来激活script代码
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代码:

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //时间戳用来解决加载页面缓存的问题
            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来捕获返回状态判断和处理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) {
                                    //因为加载的src路径是之前相对加载HTML页面的,需要修改为当前页
                                    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标签,以此来激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")请求出错】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")异常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

(三)调用文档

1、将hxsfx.js和ajax.js放入Scripts文件夹中的hxsfx文件夹

2、在Scripts文件夹同级目录新建index.html页面




    js库测试
    
    
    


    

3、在Scripts文件夹同级目录,首先新建Views文件夹,接着其中新建test文件夹,最后在test文件夹中新建testPage.html