使用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腳本注入技術。