a.jsp通过Ajax调用b.jsp，然后返回b.jsp的内容显示在a.jsp中。现在遇到一个问题，就是在b.jsp中定义了js，在a.jsp中click button并没有调用该js。在firefox中通过Firebug查看源代码。把它保存成html或jsp，js都可以被调用。源代码如下：
-----a.jsp-----------------------?
<%@ page language="java" contentType="text/html" %>?
<%?
?? String tt = "Title";?
%>?
<%=tt %>?
<button id="getContent" name="getContent" onclick="getContent();">Get Content</button>?
<p></p>?
<div id="myDiv">?
</div>?
<p></p>?
End?
<script type="text/javascript">?
xmlhttp = new XMLHttpRequest();?
function getContent() {?
xmlhttp.open("POST","b.jsp",true);?
xmlhttp.send();?
xmlhttp.onreadystatechange=function()?
? {?
? if (xmlhttp.readyState==4 && xmlhttp.status==200)?
??? {?
??? document.getElementById("myDiv").innerHTML=xmlhttp.responseText;?
??? }?
? }?
}?
</script>?
--------------------b.jsp-------------------------?
<%@ page language="java" contentType="text/html" %>?
<%?
String aa = "To include jsp";?
%>?
<%=aa? %> <br />?
<input id="myname" name="myname" />?
<button id="getName" name="getName" onclick="getName();">Get Name</button>?
<script type="text/javascript">?
function getName() {?
alert("ok");?
document.getElementById("myname").value = 'Bill';?
}?
</script>?
---------------------src.html---------------------------?
<html><head></head><body>Title?
<button onclick="getContent();" name="getContent" id="getContent">Get Content</button>?
<p></p>?
<div id="myDiv">?
To include jsp <br>?
<input name="myname" id="myname">?
<button onclick="getName();" name="getName" id="getName">Get Name</button>?
<script type="text/javascript">?
function getName() {?
alert("ok");?
document.getElementById("myname").value = 'Bill';?
}?
</script></div>?
<p></p>?
End?
<script type="text/javascript">?
xmlhttp = new XMLHttpRequest();?
function getContent() {?
xmlhttp.open("POST","b.jsp",true);?
xmlhttp.send();?
xmlhttp.onreadystatechange=function()?
? {?
? if (xmlhttp.readyState==4 && xmlhttp.status==200)?
??? {?
??? document.getElementById("myDiv").innerHTML=xmlhttp.responseText;?
??? }?
? }?
}?
</script>?
</body></html>?
-----------------------End------------------------
出现这个问题的原因是：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。?
解决办法：用innerHTML嵌入以后，通过DOM从myDIV中取出嵌入的script节点，然后新创建一个script节点，并把嵌入的script里面的内容也赋给新创建的script节点，然后把这个新节点追加到页面的head节点中，这样就可以调用里面的getName方法了。
?
这里有两种方式：
第一种方式：只修改a.jsp，增加红色部分
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;?
var myDivScript = document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);?
var newScript = document.createElement("SCRIPT");?
newScript.innerHTML = myDivScript.innerHTML;?
document.getElementsByTagName("HEAD").item(0).appendChild(newScript);?
?
?
这种方式在FF中可以work，但是IE中不能work。
?
第二种方式：把b.jsp中的js抽取出来放在一个js文件里。在a.jsp中通过src引用的方式把js加到HEAD里面。
在a.jsp的<script> 部分增加一个函数?function append()?
--------------------a.jsp-------------------------------------------------------
<%@ page language="java" contentType="text/html" %>
?
<%
? ?String tt = "Title";
? ?String path = "../js/script.js";
%>
?
<%=tt %>
<button id="getContent" name="getContent" onclick="getContent();">Get Content</button>?
<p></p>
?
<div id="myDiv">
</div>
?
<p></p>
?
End
?
?
<script type="text/javascript">
xmlhttp = new XMLHttpRequest();
?
function getContent() {
?
append();
xmlhttp.open("POST","./b.jsp",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
?{
?if (xmlhttp.readyState==4 && xmlhttp.status==200)
? ?{
? ?document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
? ?}
?}
}
?
?
?
function append() {
?
var head = document.getElementsByTagName('HEAD').item(0);
var script = document.createElement("script");?
script.src = "<%=path %>";
script.type="text/javascript";
script.charset="utf-8";
head.appendChild(script);
}
?
</script>
?
------------------------------------b.jsp--------------------
<%@ page language="java" contentType="text/html" %>
?
<%?
String aa = "To include jsp";
%>
?
<%=aa ?%> <br />
?
<input id="myname" name="myname" />
?
<button id="getName" name="getName" onclick="getName();">Get Name</button>?
?
--------------------------------------------script.js-----------------------------
function getName() {
document.getElementById("myname").value = 'Bill';
}
-------------------------------------------------End-------------------------------
?
这种方式在FF和IE中都能work。
?
?
?