执行AJAX返回HTML片段中的JavaScript脚本
如果AJAX加载的数据是一个HTML片段,而且这个HTML片段还包含脚本<script>块,那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中,你会发现AJAX加载回来的脚本根本没有执行。这是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一样能正常工作
&nbs
相关文档:
AJAX中文问题分为两大类:
1)发送路径中的参数有中文,在服务器段接收参数值是乱码
例如:
var url="a.jsp?name=小李";
xmlHTTP.open ("post",url,true);
解决办法:
利用javascript的提供的escape()或encodeURI()方法
例如:
客户端:
var url="a.jsp?name=小李";
url=encode ......
在web.config中修改修改属性
1:<configSections><configSections>中加下面代码
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral ......
<html>
<head>
<title>new ajax</title>
<mce:style type="text/css"><!--
body{
margin-top:50px;
}
.MyDiv{
font-size:12px;
border:1px solid #DDD;
background-color:#FFD;
margin:2px;
width:200px;
}
--></mce:style><style type="t ......
目的:通过一个线程,判断SESSION是否过期,如果过期,调用客户端页面的JS,把信息推给客户端。
我们要让DWR程序支持反向AJAX。需要在web.xml中DWRServlet里添加一个初始化参数,另外要配置一个监听器,在适合的时候关闭线程。
如下是web.xml中的配置
<listener>
< ......