當我們使用Ajax技術來更新頁面內容的時候,我們常常會遇到一種情況:在返回的HTML代碼中有一段JavaScript代碼需要執行。
舉個例子,假設我們有一個網頁,其中有一個按鈕,點擊該按鈕會通過Ajax請求獲取一些新的內容,并將其顯示在頁面的某個特定區域中。這些新的內容可能包含一些需要執行的JavaScript代碼,例如動態加載一些圖像或者其他資源。
var xmlhttp; if (window.XMLHttpRequest) { // code for modern browsers xmlhttp = new XMLHttpRequest(); } else { // code for old IE browsers xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("content").innerHTML = this.responseText; } }; xmlhttp.open("GET", "ajax.php", true); xmlhttp.send();
在上面的例子中,當Ajax請求成功后,服務器會返回一段HTML代碼,并將其作為響應的文本保存在this.responseText
中。然后,我們將這段代碼通過innerHTML
屬性賦值給content
元素,從而實現頁面內容的更新。
然而,當這段HTML代碼中包含一些需要執行的JavaScript代碼時,我們會遇到一個問題:這些代碼不會被自動執行。原因是innerHTML
屬性只會將文本當作純文本處理,不會解析其中的JavaScript代碼。為了解決這個問題,我們需要額外的步驟來手動執行這些代碼。
if (this.readyState == 4 && this.status == 200) { document.getElementById("content").innerHTML = this.responseText; var scripts = document.getElementById("content").getElementsByTagName("script"); for (var i = 0; i< scripts.length; i++) { eval(scripts[i].innerHTML); } }
在這段更新后的代碼中,我們首先使用getElementsByTagName("script")
方法獲取content
元素下所有的script
元素。然后,通過遍歷這些script
元素,使用eval()
方法將其內容作為JavaScript代碼來執行。
總結來說,當我們使用Ajax來更新內容時,如果返回的HTML代碼中包含需要執行的JavaScript代碼,我們需要手動執行這些代碼。通過獲取script
元素并使用eval()
方法,我們可以解析和執行這些代碼。