ajax方式載入script檔用法實例詳解

利用ajax方式，把script檔案程式碼從後台載入到前台，然後對載入到的內容透過eval()執行程式碼。第二種是，動態建立一個script標籤，設定其src屬性，透過把script標籤插入到頁面head來載入js，相當於在head中寫了一個cf63513d015db02810a3e91eb1a177969429d6e1efad07153846e528605c447e,只不過這個script標籤是用js動態創建的 
比如說是我們要動態地加載一個callbakc.js，我們就需要這樣一個script標籤： 

<script type="text/javascript" src="call.js"></script>

如下程式碼就是如何透過js來建立這個標籤（並且加入head）： 

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script);

當載入完call.js， 我們就要呼叫其中的方法。不過在header.appendChild(script)之後我們不能馬上呼叫其中的js。因為瀏覽器是非同步載入這個js的，我們不知道他什麼時候載入完。然而我們可以透過監聽事件的方法來判斷helper.js是否載入完成。 （假設call.js中有一個callback方法） 

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

設定了2個事件監聽函數，因為在ie中使用onreadystatechange, 而gecko,webkit 瀏覽器和opera都支援onload。事實上this.readyState == 'complete'並不能運作的很好，理論上狀態的變化是以下步驟： 

0 uninitialized 
1 loading 
2 loaded 
3 interactive 
4 complete

但是有些狀態會被跳過。根據經驗在ie7中，只能獲得loaded和completed中的一個，不能都出現，原因也許是對判斷是不是從cache中讀取影響了狀態的變化，也可能是其他原因。最好把判斷條件改成this.readyState == 'loaded' || this.readyState == 'complete' 
參考jQuery的實作我們最後實作為： 

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

還有一種簡單的情況就是可以把help()的呼叫寫在helper.js的最後，那麼可以保證在helper.js在載入完後能自動呼叫help(),當然最後還要能這樣是不是適合你的應用。 

另外要注意： 

1.因為script標籤的src可以跨網域存取資源,所以這個方法可以模擬ajax，解決ajax跨網域存取的問題。 
2.如果用ajax回傳的html程式碼包含script，直接用innerHTML插入dom中是不能使html中的script運作的。粗略的看了下jQuery().html(html)的原始程式碼，jQuery也是先解析傳入的參數，剝離其中的script程式碼，動態建立script標籤，所用jQuery的html方法加入dom的html如果包含script是可以執行的。如： 

jQuery("#content").html("<script>alert(&#39;aa&#39;);<\/script>");

以上是ajax方式載入script檔用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！