用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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
vue登录路由验证的实现
Dec 13 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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遍历XML文档所有节点的方法
2015/03/12 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
用Python进行行为驱动开发的入门教程
2015/04/23 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python创建子类的方法分析
2019/11/28 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
办公室个人总结
2015/02/28 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Redis分布式锁的7种实现
2022/04/01 Redis