用AJAX返回HTML片段中的JavaScript腳本
2024-05-06 14:12:01
供稿：網友
這是AJAX開發中很常見的問題，如果你不是一直在用JavaScript框架做開發，相信你早就發現這個問題了。本文分析了兩個解決辦法，其中一個是講解jQuery框架的實現。
一、 問題描述
下面舉個簡單的例子，演示問題所在。在下面的例子中，假設變量responseText就是AJAX加載的HTML片段數據，其中包含腳本彈出一條消息，用innerHTML方法插入ID為ajaxData的DIV中，你可能期望看到彈出那個消息框，結果你發現沒有，問題就是這樣。
代碼如下:
<div id="ajaxData"></div>
<script type="text/javascript">
var responseText = '<p>這是一個段落</p><script>alert("這是AJAX加載回來的腳本片段")</script>';
document.getElementById('ajaxData').innerHTML = responseText;
</script>
二、兩種解決辦法
1、 利用JavaScript的eval方法執行腳本。
本方法的具體實現思路是把xmlHttp.responseText中的腳本都抽取出來，不管AJAX加載的HTML包含多少個腳本塊，我們對找出來的腳本塊都調用eval方法執行它即可。下面提供一個封裝好的函數：
代碼如下:
function executeScript(html)
{
var reg = /<script[^>]*>([^/x00]+)$/i;
//對整段HTML片段按<//script>拆分
var htmlBlock = html.split("<//script>");
for (var i in htmlBlock)
{
var blocks;//匹配正則表達式的內容數組，blocks[1]就是真正的一段腳本內容，因為前面reg定義我們用了括號進行了捕獲分組
if (blocks = htmlBlock[i].match(reg))
{
//清除可能存在的注釋標記，對于注釋結尾-->可以忽略處理，eval一樣能正常工作
var code = blocks[1].replace(/<!--/, '');
try
{
eval(code) //執行腳本
}
catch (e)
{
}
}
}
}
本方法的使用如下，對HTML用innerHTML方法添加到DOM，緊跟著調用executeScript方法執行腳本塊：
代碼如下:
document.getElementById("div1").innerHTML = xmlHttp.responseText;
executeScript(xmlHttp.responseText);
顯然這個方法還是存在缺陷的，如果xmlHttp.responseText包含像這樣的外部腳本調用：
<script type="text/javascript" src="/js/common.js"></script>，executeScript方法不能再深入執行這個外部加載的腳本。
2、 學習并使用jQuery框架的實現
jQuery對于AJAX加載HTML，是最終在執行html(value)方法時把整個xmlHttp.responseText數據轉換成DOM，然后利用DOM相關操作方法來找出里面的腳本，最后再把這些腳本插入到head中。具體原理也不好說，先舉個最簡單的例子，然后再分析一下大致思路。先看例子：
代碼如下:
$.get('ajax.aspx', function(data)
{
$('#div1').html(data);
});
現在假設上面ajax.aspx頁面返回的是HTML片段，而且包含一個或多個腳本塊，甚至外部腳本引用。div1是AJAX請求發起頁的一個DIV標簽的ID，整句代碼實現的結果是加載ajax.aspx中的HTML填充到一個ID為div1的DIV標簽中。
