用AJAX返回HTML片段中的JavaScript脚本


Posted in Javascript onJanuary 04, 2010

这是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标签中。

在匿名回调函数中通过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)

最后,在globalEval方法中,发现head.removeChild( script );方法,就是把脚本插入head后马上又移除脚本标签,这也是避免因为重复执行html(value)方法在head区生成重复的脚本块。这个移除是不影响脚本执行的,同是也是不会清除脚本块中的相关变量值。显然,如果你想看看html(data)最终的执行结果,比如抽取后插入到head的脚本块是什么,你可以先临时注释这一行代码。
Javascript 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 #Javascript
javascript 模拟点击广告
Jan 02 #Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 #Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 #Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 #Javascript
firefox插件Firebug的使用教程
Jan 02 #Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 #Javascript
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
PHP数组实例总结与说明
2011/08/23 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
浅析python的优势和不足之处
2018/11/20 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
建龙钢铁面试总结
2014/04/15 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
节约用电通知
2015/04/25 职场文书
2015年店长个人工作总结
2015/10/23 职场文书