参考《深入浅出Ajax》一书,并且阅读了一位高人的《深入认识javascript中的eval函数》
一文,有很多启发,于是我写了一个使用Ajax从服务器段动态生成JavaScript代码的例子,并且使用了eval函数,我是初学者,写此文的目的其实是想让大家给我的代码多提建议,谢谢!!
index.jsp
<%@ page
language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=GBK">
<script
language="JavaScript"
type="text/javascript">
<!--
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp =
new ActiveXObject("Microsoft.XMLHTTP");
}
else
if(window.XMLHttpRequest)
{
xmlHttp =
new XMLHttpRequest();
}
}
function choose()
{
xmlHttp.open("GET",
"ProcessServlet?choose="+document.getElementById("choosejsfile").value,
true);//这个open方式是使XMLHttpRequest提交到一个Servlet
//xmlHttp.open("GET",
"ajaxstudy/secondgeneratejs.jsp?choose="+document.getElementById("choosejsfile").value,
true);//这个是使XMLHttpRequest提交到一个jsp
//其实以上两种提交方式没什么本质区别。
xmlHttp.onreadystatechange =
processRequest;//processRequest回调函数
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function processRequest()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)//信息已经成功返回
{
alert(xmlHttp.responseText);
invoke(xmlHttp.responseText);
}
else
{
alert("您请求的页面有异常");
}
}
else
{
//信息还没有返回,请等待
}
}
//下面的代码是用来动态执行由服务器段传回来的字符串
//"var fun =
function(){alert( '执行第一段代码,我是由服务器端的Servlet传来的');return
'执
//行第一段代码';}"
//不能直接使用eval函数是因为eval只能声明局部的变量。需要使用如下方式。
//在《深入认识javascript中的eval函数》一文中讲的非常详细。
var X2 = {}
X2.Eval = function(code)
{
if(window.attachEvent &&
!window.opera)
{
//ie
window.execScript(code);
}
else
{
//not
ie
window.eval(code);
}
}
function invoke(code)
{
X2.Eval(code);
}
//-->
</script>
<title>Insert
title here</title>
</head>
<body
onload="createXMLHttpRequest()">
<select
id="choosejsfile">
<option
value="1">第一段代码</option>
<option
value="2">第二段代码</option>
<option
value="3">第三段代码</option>
</select>
<input type="button" onclick="choose()"
value="提交">
<input type="button" onclick="fun()"
value="测试">
<!--
注意fun并没有声明,它是在服务器段以字符串的形式传过来的,eval执行这个字符串,
动态声明了一个函数fun。我下面把服务器段的代码贴上。
-->
</body>
</html>
服务器段代码:
xmlHttp.open("GET",
"ProcessServlet?choose="+document.getElementById("choosejsfile").value,
true);//这个open方式是使XMLHttpRequest提交到一个Servlet
假设open方法指定提交到一个Servlet,名字叫ProcessServlet,我现在把这个Servlet的代码贴出来,
如果是提交到一个jsp,代码相同,提交到哪里不是关键。
ProcessServlet.java(只贴doGet方法了)
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException
{
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
String
choose = request.getParameter("choose");
StringBuffer
sb = new StringBuffer();
if(choose !=
null &&
!choose.equals(""))
{
if(choose.equals("1"))
//下拉菜单选择“第一段代码”
{
System.out.println("返回第一段代码");
response.addHeader("Content-Type","text/html");
sb.append("var fun = function(){alert(
'执行第一段代码,我是由服务器端的Servlet传来的');return
'执行第一段代码';}");
}
else
if(choose.equals("2"))
//下拉菜单选择“第二段代码”
{
System.out.println("返回第二段代码");
response.addHeader("Content-Type","text/html");
sb.append("var fun = function(){alert(
'执行第一段代码,我是由服务器端的Servlet传来的');return
'执行第一段代码';}");
}
else
if(choose.equals("3"))
//下拉菜单选择“第三段代码”
{
System.out.println("返回第三段代码");
response.addHeader("Content-Type","text/XML");
sb.append("var fun = function(){alert(
'执行第一段代码,我是由服务器端的Servlet传来的');return
'执行第一段代码';}");
}
//服务器返回给index.jsp的response
response.getWriter().write(sb.toString());
}
else
{
System.out.println("bad reqest");
}
}
运行界面:
起始页:
先点击“提交”按钮,提交到Servlet,在Servlet中拼出来一个字符串:
"var fun = function(){alert( '执行第一段代码,我是由服务器端的Servlet传来的');return
'执行第一段代码';}"
通过response把这段字符串传回index.jsp,index.jsp通过eval方法执行上述字符串,就动态声明了一个叫fun的JavaScript函数。
点击“测试”按钮,点击事件中调用fun函数。
就是这些,希望朋友们看完多提宝贵的意见,互相促进,谢谢!!!
在附件里是全部代码。