執行AJAX返回HTML片段中的JavaScript指令碼

標籤：添加   gif   tar   post   使用   多個   cut   style   ref   

如果AJAX載入的資料是一個HTML片段，而且這個HTML片段還包含指令碼<script>塊，那麼在你把這資料xmlHttp.responseText用innerHTML方法插入到當前文檔一個元素中，你會發現AJAX載入回來的指令碼根本沒有執行。這是AJAX開發中很常見的問題，如果你不是一直在用JavaScript架構做開發，相信你早就發現這個問題了。本文分析了兩個解決辦法，其中一個是講解jQuery架構的實現。

一、 問題描述

下面舉個簡單的例子，示範問題所在。在下面的例子中，假設變數responseText就是AJAX載入的HTML片段資料，其中包含指令碼彈出一條訊息，用innerHTML方法插入ID為ajaxData的DIV中，你可能期望看到彈出那個訊息框，結果你發現沒有，問題就是這樣。

<div id="ajaxData"></div>
<script type="text/javascript">var=‘;
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;//匹配Regex的內容數組，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標籤中。

在匿名回呼函數中通過typeof(data)可以發現data還是原始的字串，即等同於xmlHttp.responseText，通過代碼執行跟蹤發現，對AJAX載入指令碼片段的執行處理不在jQuery的AJAX模組代碼中，而是在html(value)方法，即把一段包含指令碼塊的HTML字串插入DOM時，由它負責抽出指令碼進行調用處理。而html(value)方法其實又是調用了append(value)方法……，整個過程大概調用了以下方法，箭頭代表調用這些方法的先後順序：

html -> append -> domManip -> clean -> evalScript -> globalEval

其中clean方法特別關鍵，這個方法也是jQuery比較重要的方法，其中也涉及修複HTML錯誤（標籤沒有結束，表格結構調整等方法）處理指令碼。而指令碼的抽出也是在這裡進行的。看看相關原始碼(jQuery1.3.2)：

if (fragment) 
{
    for (var i = 0; ret[i]; i++) 
    {
        if (jQuery.nodeName(ret[i], "script") && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript")) 
        {
            scripts.push(ret[i].parentNode ? ret[i].parentNode.removeChild(ret[i]) : ret[i]);
        }
        else 
        {
            if (ret[i].nodeType === 1) 
                ret.splice.apply(ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))));
            fragment.appendChild(ret[i]);
        }
    }
    return scripts;
}

另外，在evalScript方法中我們還發現如下代碼，這裡是“同”步載入像<script type="text/javascript" src="/js/common.js"></script>這樣的外部指令碼，解決executeScript方法存在的一個缺陷：

if (elem.src) 
    jQuery.ajax(
    {
        url: elem.src,
        async: false,
        dataType: "script"
    });

同時也發現如下代碼，這段代碼是把xmlHttp.responseText中的指令碼刪除，因為在這個方法中，jQuery是準備把抽取的指令碼放入head區，所以刪除可以避免最終的HTML出現重複的指令碼塊：

if (elem.parentNode)
    elem.parentNode.removeChild(elem);

最後，在globalEval方法中，發現head.removeChild( script );方法，就是把指令碼插入head後馬上又移除指令碼標籤，這也是避免因為重複執行html(value)方法在head區產生重複的指令碼塊。這個移除是不影響指令碼執行的，同是也是不會清除指令碼塊中的相關變數值。顯然，如果你想看看html(data)最終的執行結果，比如抽取後插入到head的指令碼塊是什麼，你可以先臨時注釋這一行代碼。

執行AJAX返回HTML片段中的JavaScript指令碼