当前页面: 开发资料首页 → JSP 专题 → 事件驱动的Web之旅——JSP与JavaScript的融合(续)
摘要: Java Delphi jsp JavaScript
我们再来说一说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
<table class=MsoTableGrid style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext" cellSpacing=0 cellPadding=0 border=1>
<tr style="mso-yfti-irow: 0; mso-yfti-lastrow: yes"> <td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext 1pt solid; WIDTH: 426.1pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt" vAlign=top width=568><%@ page contentType="text/html; charset=utf-8" language="java" %><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
<%@ import="java.sql.*" %>
<head>
</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 { %>
classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F
width="32" height="32">
<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">
your infomation:
</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); %>
The information of other visitors:
<% ResultSet RS = stmt.executeQuery("SELECT * FROM ClientMsg");
while(RS.next()){ %>
<table>
<tr><td COLSPAN="2">
</td></tr>
<tr><td COLSPAN="2">
<%=RS.getString("IP")%> at
<%=RS.getString("Time")%> visited this Page
</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;
}
%>
</body>
这个Web运行时,首先用JavaScript获得客户端的信息,然后自动提交页面,提交后JSP会记录相应信息,并保存在数据库里,然后再把所有的访问者的情况从数据库里读出来显示。在这个程序里还调用了MSAgent他所显示的文字全都是JSP的变量,当然你也可以设置成别的。
本程序还用到了数据库,是Accsess,一个放于 %YOURAPP%/WEB-INF/msg.mdb的文件。里面有一个表ClientMsg。有几个字段:
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
好的例子一个足已!
也许你会说,不就是提交么?
对,下一次我们讲的就是 提交的艺术。
(运行环境 IE6、TOMCAT4.1.x JDK1.4.x)