javascript指令碼非同步載入介紹

本章節簡單介紹一下常見的幾種實現js指令碼非同步載入的方式，需要的朋友可以做一下參考。

一.XHR Eval():

從名稱基本就可以看出實現方式，也就是通過ajax方式非同步載入js程式碼，然後使用eval()執行。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
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>標籤之中。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
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是不能跨域的。

這裡要介紹的方式是可以實現跨域，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var scriptElem = document.createElement("script");
scriptElem.src = "http://www.softwhy.com/antzone.js";
document.getElementByTagName("head")[0].appendChild(scriptElem);

四.Script Defer:

也就是使用script標籤自帶的defer屬性實現非同步效果。

具體可以參閱<script>標籤的defer屬性用法簡單介紹一章節。

當然還有其他的方式必須使用require.js等實現非同步載入。