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

2023-01-04 0 550

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

序言

前段时间写网志吗是太伤痛了,倒不是写网志这类,而要完稿之后往数个网络平台正式发布的操作过程,一不注意是十几分钟往下的时间耗用。

为的是化解那个问题,以后初步设计的“化解自新闻媒体全屏多网络平台正式发布”工程项目要得马上著手健全了,谋求尽早让他们从正式发布整件事上证悟出埋首写诗。

【hxsfx的JavaScript库】那个系列产品大体上是为“全屏多网络平台正式发布”工程项目长远目标用的。或许把各模块分拆出,是为的是尽可能让爸爸妈妈能拷贝狸尾豆(在相容性方面,因为对个人潜能的其原因,基本上只会相容Chrome应用程序)。

hxsfx.ajax库

(一)如是说

AJAX 是触发器的 JavaScript 和 XML(Asynchronous JavaScript And XML),合作开发hxsfx.ajax库的主要目地是期望通过触发器读取HTML,进而尽可能增加间接在js中写HTML来创下网页文本。

hxsfx.ajax那个库与jquery的ajax机能大致相同,不过短时期内如果是写不出咱那么健全的。呵呵~

诸位爸爸妈妈别问,为何不必jquery的ajax而要他们再写两个呢?

问是,写手讨厌造车轮。打趣了~

只不过其原因是为的是增加协力库的倚赖,达到对工程项目地全面性掌控。

工程项目门牌号:https://github.com/hxsfx/hxsfxwebtools

(二)标识符

要他们合作开发两个ajax库,需要借助于Web APIUSB中的XMLHttpRequest(XHR)第一类。

容。

1、在window第一类上新建两个hxsfx第一类,本系列产品的所有库基本都会在hxsfx第一类之中:

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

2、在hxsfx第一类的基础上新建两个ajax第一类:

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

3、在ajax第一类中新建loadHTML方法,设置两个参数,分别是ele准备读取HTML的容器元素和url读取HTML的门牌号:

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

4、在loadHTML方法中新建XMLHttpRequest第一类:

//ajax.js(function (){ window.hxsfx.ajax ={ loadHTML: function (ele, url){ 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){ //在这处理返回的HTML }} else { console.log(“【ajax.get(“+ url +”)请求出错】”);} }} catch (ex){ console.log(“【ajax.get(“+ url +”)异常】”+ ex.message);} }; httpRequest.send();} };})();

5、为的是化解读取HTML缓存的问题,将loadHTML方法中传入的URL参数后面加上两个时间戳:

//ajax.js//时间戳用来化解读取网页缓存的问题var urlTimeStamp =”timeStamp=”+ new Date().getTime();url +=((url.indexOf(?)>=0)? “&”: “?”)+ urlTimeStamp;

6、【重点】在这处理返回的HTML时,如果间接将HTML读取到容器中,会出现HTML中Javascript标识符不执行的问题。化解那个问题,需要将读取的script标签替换为script元素:

//ajax.jsele.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

更改背景色更改下面一句话的字体颜色

这儿是一句话。

最后

以上文本只是hxsfx.ajax库的开始,后续的文本更新爸爸妈妈可以通过访问Github项

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务