用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 相关文章推荐
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
React路由管理之React Router总结
May 10 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
php按单词截取字符串的方法
2015/04/07 PHP
php简单生成随机数的方法
2015/07/30 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Django-imagekit的使用详解
2020/07/06 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
总结30个CSS3选择器
2017/04/13 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
工程业务员工作职责
2013/12/07 职场文书
公益活动邀请函
2014/02/05 职场文书
2014年工人工作总结
2014/11/25 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
医院感染管理制度
2015/08/05 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
python前后端自定义分页器
2022/04/13 Python