javascript脚本异步加载介绍

日期: 2022-12-08 13:45:35 分类: 前端浏览量：留言数： 98597

本章节简单介绍一下常见的几种实现js脚本异步加载的方式，需要的朋友可以做一下参考。

一.XHR Eval():

从名称基本就可以看出实现方式，也就是通过ajax方式异步加载js代码，然后使用eval()执行。

代码如下:

var xhrObj = new XMLHttpRequest();
xhrObj.onreadystatechange = function () {
  if (xhrObj.readyState == 4 && 200 == xhrObj.status) {
    eval(xhrObj.responseText);
  }
};
xhrObj.open("GET", "antzone.js", true);
xhrObj.send("");

关于ajax的教程可以参阅ajax教程板块。

二.XHR Injection:

其实也是利用ajax实现异步加载，但是这里会创建script标签，将通过ajax加载的内容写入<script>标签之中。

代码如下:

var xhrObj = new XMLHttpRequest();
xhrObj.onreadystatechange = function () {
  if (xhrObj.readyState == 4) {
    var scriptElem = document.createElement("script");
    document.getElementsByTagName("head")[0].appendChild(scriptElem);
    scriptElem.text = xhrObj.responseText;
  }
};
xhrObj.open("GET", "antzone.js", true);
xhrObj.send("");

三.Script DOM Element:

上面的方式都不可跨域的，因为ajax是不能跨域的。

这里要介绍的方式是可以实现跨域，代码如下:

var scriptElem = document.createElement("script");
scriptElem.src = "http://www.pipipi.net/antzone.js";
document.getElementByTagName("head")[0].appendChild(scriptElem);

四.Script Defer:

也就是使用script标签自带的defer属性实现异步效果。

具体可以参阅<script>标签的defer属性用法简单介绍一章节。

当然还有其他的方式必须使用require.js等实现异步加载。

javascript脚本异步加载介绍，这样的场景在实际项目中还是用的比较多的，关于javascript脚本异步加载介绍就介绍到这了。

javascript脚本异步加载介绍属于前端实例代码，有关更多实例代码大家可以查看。