论坛首页 入门技术论坛

使用Ajax从服务器段动态生成JavaScript代码

浏览 1540 次
该帖已经被评为新手帖
作者 正文
   发表时间:2008-07-31  

    参考《深入浅出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函数。
    就是这些,希望朋友们看完多提宝贵的意见,互相促进,谢谢!!!

    在附件里是全部代码。

  • DongTaiJiaZaiDaiMai.rar (95.9 KB)
  • 描述: 使用Ajax从服务器段动态生成JavaScript代码的全部源代码
  • 下载次数: 42
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics