讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議175:使用XHR腳本注入 >

建議175:使用XHR腳本注入

使用XMLHttpRequest(XHR)對像將腳本注入到頁面中,以非阻塞方式獲得腳本。這種方法需要首先創建一個XHR對象,然後下載JavaScript文件,接著用一個動態<script>元素將JavaScript代碼注入頁面。下面是一個簡單的例子:


var xhr=new XMLHttpRequest;

xhr.open("get","file1.js",true);

xhr.onreadystatechange=function{

if(xhr.readyState==4){

if(xhr.status>=200&&xhr.status<300||xhr.status==304){

var script=document.createElement("script");

script.type="text/javascript";

script.text=xhr.responseText;

document.body.appendChild(script);

}

}

};

xhr.send(null);


在上面代碼中,先向服務器發送一個獲取file1.js文件的GET請求。onreadystatechange事件處理函數檢查readyState是不是4,然後檢查HTTP狀態碼是不是有效(大於或等於200表示有效的回應,304表示一個緩存響應)。如果收到了一個有效的響應,那麼就創建一個新的<script>元素,將它的文本屬性設置為從服務器接收到的responseText字符串。這樣做實際上會創建一個帶有內聯代碼的<script>元素。一旦新<script>元素被添加到文檔,代碼將被執行,並準備使用。

這種方法的一個優點是可以下載不立即執行的JavaScript代碼。由於代碼返回在<script>標籤之外,它下載後不會自動執行,這使得可以推遲執行,直到一切都準備好了。另一個優點是,同樣的代碼在所有現代瀏覽器中都不會引發異常。

這種方法的主要缺點:JavaScript文件必須與頁面放置在同一個域內。正因為如此,大型網站通常不採用XHR腳本注入技術。