//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