序言
前段时间写网志吗是太伤痛了,倒不是写网志这类,而要完稿之后往数个网络平台正式发布的操作过程,一不注意是十几分钟往下的时间耗用。
为的是化解那个问题,以后初步设计的“化解自新闻媒体全屏多网络平台正式发布”工程项目要得马上著手健全了,谋求尽早让他们从正式发布整件事上证悟出埋首写诗。
【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项