ajax获取html片段,用AJAX返回HTML片段中的JavaScript脚本

这是AJAX开发中很常见的问题，如果你不是一直在用JavaScript框架做开发，相信你早就发现这个问题了。本文分析了两个解决办法，其中一个是讲解jQuery框架的实现。

一、 问题描述

下面举个简单的例子，演示问题所在。在下面的例子中，假设变量responseText就是AJAX加载的HTML片段数据，其中包含脚本弹出一条消息，用innerHTML方法插入ID为ajaxData的DIV中，你可能期望看到弹出那个消息框，结果你发现没有，问题就是这样。

var responseText = '

这是一个段落

';

document.getElementById('ajaxData').innerHTML = responseText;

二、两种解决办法

1、 利用JavaScript的eval方法执行脚本。

本方法的具体实现思路是把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可。下面提供一个封装好的函数：

function executeScript(html)

{

var reg = /

//对整段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(/