执行AJAX返回HTML片段中的JavaScript脚本
如果AJAX加载的数据是一个HTML片段，而且这个HTML片段还包含脚本
，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方法中我们还发现如下代码，这里是“同”步加载像这样的外部脚本，解决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的脚本块是什么，你可以先临时注释这一行代码。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章