我们再来说一说JSP和JavaScript的搭配使用和相互访问。

也许你用过Delphi的WebBroker开发过Web Application当你每做的一件事(提交)就是一个WebAction,说白了,就是一个函数。而这个函数在ASP、JSP条件下就成了一个页面。不过你也应该把他们理解成函数,一个返回字符串的函数。而这个字符串,就是你在浏览器利用查看源文件菜单命令所看到的结果。这样,JavaScript调用Java变量的问题就迎刃而解了。我们的JSP返回的字符串有JavaScript代码,而这些代码是由浏览器解释执行的。由于JavaScript代码的生成都可以由JSP动态生成,所以,JavaScript中可以包含JSP代码的运行结果。这样就实现了JavaScript对JSP变量的调用。

下面我们再来看一看,JavaScript对JSP方法和JSP对JavaScript的调用。这两个调用都有一个共同点,那就是需要对页面进行提交,在用Hidden设置几个隐藏参数。JSP根据获得的参数再进行相应的处理,就可以了。也许有的人已经不太明白了,那我们还是用一个程序来说明问题吧!

程序二:一个服务器获得客户端信息的Web页面。他获得了客户端的一些屏幕设置,并把它们记录在数据库里。

GetClientInfo.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" %>                      
<%@ import="java.sql.*" %>           
<HTML>           
<HEAD>           
<TITLE>Information</TITLE>           
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">           
<STYLE TYPE="text/css">           
TABLE, BODY {           
    font-family: "Courier New";           
    font-size: 10pt;           
}           
</STYLE>           
</HEAD>           
<BODY>           
<%           
    if(request.getParameter("isHaveData") == null){ %>           
        <FORM NAME="frmClient" METHOD="POST">           
        <INPUT TYPE="HIDDEN" NAME="isHaveData" VALUE="">           
        <INPUT TYPE="HIDDEN" NAME="iScreenWidth">           
        <INPUT TYPE="HIDDEN" NAME="iColorDepth">           
        <INPUT TYPE="HIDDEN" NAME="iScreenHeight">           
        <INPUT TYPE="HIDDEN" NAME="sBrowseName">           
        <INPUT TYPE="HIDDEN" NAME="sBrowseVer">           
        <INPUT TYPE="HIDDEN" NAME="iClientHeight">           
        <INPUT TYPE="HIDDEN" NAME="iClientWidth">           
        <SCRIPT language="JavaScript1.4" TYPE="TEXT/JAVASCRIPT">           
        frmClient.iScreenWidth.value = screen.width;           
        frmClient.iScreenHeight.value = screen.height;           
        frmClient.iColorDepth.value = screen.colorDepth;           
        frmClient.sBrowseName.value = navigator.appName;           
        frmClient.sBrowseVer.value = navigator.appVersion;           
        frmClient.iClientHeight.value = screen.availHeight;           
        frmClient.iClientWidth.value = screen.availWidth;           
        frmClient.submit();           
        </SCRIPT>           
        </FORM>           
    <% } else { %>           
        <OBJECT id=objMSAgent           
classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F           
 width="32" height="32">           
</OBJECT>           
        <SCRIPT language="JavaScript1.4" TYPE="TEXT/JAVASCRIPT">           
            var MerlinID;           
            var MerlinACS;           
            objMSAgent.Connected = true;           
            MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);           
            Merlin = objMSAgent.Characters.Character(MerlinID);           
            Merlin.Show();           
            Merlin.Play("Surprised");           
            Merlin.Speak("<%= "Hello?" %>");           
            Merlin.Play("GestureLeft");           
            Merlin.Think("<%= "This is a jsp variant" %>");           
            Merlin.Play("Pleased");           
            Merlin.Think("<%= "JavaScript uses jsp variants" %>");           
            Merlin.Play("GestureDown");           
            Merlin.Speak("<%= "Bye! so Easy!" %>");           
            Merlin.Hide();           
            function LoadLocalAgent(CharID, CharACS) {           
                LoadReq = objMSAgent.Characters.Load(CharID, CharACS);           
                return(true);           
            }           
        </SCRIPT>           
        <TABLE>           
            <TR><TD COLSPAN="2">           
<FONT COLOR="#FF0000">your infomation:</FONT>           
</TD></TR>           
            <TR><TD>Screen Width:</TD>           
<TD><%= request.getParameter("iScreenWidth") %></TD></TR>           
            <TR><TD>Screen Height:</TD>           
<TD><%= request.getParameter("iScreenHeight") %></TD></TR>           
            <TR><TD>Color Depth:</TD>           
<TD><%= request.getParameter("iColorDepth") %></TD></TR>           
            <TR><TD>Browse Name:</TD>           
<TD><%= request.getParameter("sBrowseName") %></TD></TR>           
            <TR><TD>Browse Version:</TD>           
<TD><%= request.getParameter("sBrowseVer") %></TD></TR>           
            <TR><TD>Client area Width:</TD>           
<TD><%= request.getParameter("iClientWidth") %></TD></TR>           
            <TR><TD>Client area Height:</TD>           
<TD><%= request.getParameter("iClientHeight") %></TD></TR>           
        </TABLE>           
        <% String strDSN =           
"jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ="           
 + application.getRealPath("//WEB-INF//msg.mdb");           
        Connection cnct = null;           
        Statement stmt = null;           
        Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");           
        cnct = DriverManager.getConnection(strDSN,"","");           
        stmt = cnct.createStatement(           
ResultSet.TYPE_SCROLL_INSENSITIVE,           
ResultSet.CONCUR_UPDATABLE);           
        java.text.DateFormat dfNow =           
java.text.DateFormat.getDateTimeInstance(           
                  java.text.DateFormat.MEDIUM,           
java.text.DateFormat.MEDIUM);           
        String strDate = dfNow.format(new java.util.Date());           
        String sInsertSQL = "INSERT INTO ClientMsg VALUES(" +           
                "/'" + request.getRemoteAddr() + "/'," +           
                "/'" + strDate +"/'," +           
                "/'" + request.getParameter("iScreenWidth") + "/'," +           
                "/'" + request.getParameter("iScreenHeight") + "/'," +           
                "/'" + request.getParameter("iColorDepth") + "/'," +           
                "/'" + request.getParameter("sBrowseName") + "/'," +           
                "/'" + request.getParameter("sBrowseVer") + "/'," +           
                "/'" + request.getParameter("iClientWidth") + "/'," +           
                "/'" + request.getParameter("iClientHeight") + "/');";           
        stmt.executeUpdate(sInsertSQL); %>           
        <P><FONT COLOR="#FF0000">           
The information of other visitors:</FONT></P>           
        <% ResultSet RS = stmt.executeQuery("SELECT * FROM ClientMsg");           
        while(RS.next()){ %>           
            <TABLE>           
                <TR><TD COLSPAN="2"><HR SIZE="1"></TD></TR>           
                <TR><TD COLSPAN="2"><STRONG>           
<FONT COLOR="#0000FF"><%=RS.getString("IP")%> at           
                    <%=RS.getString("Time")%> visited this Page           
</FONT></STRONG></TD></TR>           
                <TR><TD>Screen Width:</TD>           
<TD><%= RS.getString("ScreenWidth") %></TD></TR>           
                <TR><TD>Screen Height:</TD>           
<TD><%= RS.getString("ScreenHeight") %></TD></TR>           
                <TR><TD>Color Depth:</TD>           
<TD><%= RS.getString("ColorDepth") %></TD></TR>           
                <TR><TD>Browse Name:</TD>           
<TD><%= RS.getString("BrowseName") %></TD></TR>           
                <TR><TD>Browse Version:</TD>           
<TD><%= RS.getString("BrowseVer") %></TD></TR>           
                <TR><TD>Client area Width:</TD>           
<TD><%= RS.getString("ClientWidth") %></TD></TR>           
                <TR><TD>Client area Height:</TD>           
<TD><%= RS.getString("ClientHeight") %></TD></TR>           
            </TABLE>           
        <% }           
        RS.close();           
        RS = null;           
        stmt.close();           
        cnct.close();           
        stmt = null;           
        cnct = null;           
    }           
%>           
<BR>           
</BODY>           
</HTML>

这个Web运行时,首先用JavaScript获得客户端的信息,然后自动提交页面,提交后JSP会记录相应信息,并保存在数据库里,然后再把所有的访问者的情况从数据库里读出来显示。在这个程序里还调用了MSAgent他所显示的文字全都是JSP的变量,当然你也可以设置成别的。


本程序还用到了数据库,是Accsess,一个放于%YOURAPP%/WEB-INF/msg.mdb的文件。里面有一个表ClientMsg。

好的例子一个足已!

也许你会说,不就是提交么?

对,下一次我们讲的就是 提交的艺术。

(运行环境 IE6、TOMCAT4.1.x JDK1.4.x)