事件驱动的Web之旅——JSP与JavaScript的融合
(此文献给所有使用Delphi的程序员)
说正题之前,我先写个序吧!
我深爱着Delphi,不能自拔。可是我也看到了B/S是以后程序设计的大方向,多年更随Delphi,使我在这个时候选择Java/JSP(你知道吗?第一个尝试跨平台开发的语言是Pascal)。说句实话,在Windows的桌面开发领域Delphi当之无愧为老大。他是那么的快捷和方便,在学习Web的时候,我也带进了Delphi的思想,为什么Web不可以像Windows Application那样方面呢?基于事件驱动的,状态自动保持的(这其实是Windows的思想)。然而,学了Web开发才知道,当你要做一些让服务器知道得页面变动时,你就必须提交,提交可以改变页面的状态。当然,这也增加了保持页面状态的复杂性。不过不要紧,我们慢慢来。
JSP与JavaScript的融合
说句极端的话,对于用户来说,JSP和JavaScript的效果是一样的?也许现在就开始有人扔鸡蛋了。不过你想想,怎样才能开发出理想的适合于用户使用的Application呢?这当然是站在用户的角度。如果站在程序员的角度,我刚才的话会招来很多人嘲笑,但是对于用户来说,他们不管你有多少代码,不管你有什么样的数据库支持,不管你用的是起泡排序还是快速排序,他们关心的只是面子上的问题。本文也不是讨论美工设计的。我这时要让JSP和JavaScript达到相同的效果,不过这是对于用户来说的。
也曾在CSDN的论坛上看到JSP的变量能不能被JavaScript调用,JavaScript可不可以控制JSP的问题,答案通常是两种:第一种便是直截了当的回答“不能,这根本是两码事”、第二种无非是比较诚恳“这一个是服务端、一个是客户端,怎么可能,看看书吧”。其实,殊不知,这是一个非常值得探讨的问题。
不过先别扯远了,我们先看看在用户的角度,JSP和JavaScript相同的效果。
程序一:一个方向控制程序,浏览器里有五个按钮,上下左右中。点击上面的按钮中间的按钮向上移动,点击下面的按钮中间的按钮向下移动……以此类推,点击中间的按钮恢复初始状态。
先来看一看JSP代码:
FiveButtons.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" %> <%@ page import="java.sql.*"%>
<%
int iLeft;
int iTop;
if (request.getParameter("hidL") != null) {
iLeft = Integer.parseInt(request.getParameter("hidL"));
iTop = Integer.parseInt(request.getParameter("hidT"));
if (request.getParameter("btnU") != null
&& request.getParameter("btnU").compareTo("U") == 0)
iTop -= 10;
if (request.getParameter("btnD") != null
&& request.getParameter("btnD").compareTo("D") == 0)
iTop += 10;
if (request.getParameter("btnL") != null
&& request.getParameter("btnL").compareTo("L") == 0)
iLeft -= 10;
if (request.getParameter("btnR") != null
&& request.getParameter("btnR").compareTo("R") == 0)
iLeft += 10;
if (request.getParameter("btnM") != null
&& request.getParameter("btnM").compareTo("M") == 0) {
iLeft = 400;
iTop = 200;
}
} else {
iLeft = 400;
iTop = 200;
}
%>
<HTML>
<HEAD>
<TITLE>FiveButtons</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<FORM>
<INPUT NAME="btnU" TYPE="SUBMIT" VALUE="U"
STYLE="position:absolute; top:100; left:400">
<INPUT NAME="btnD" TYPE="SUBMIT" VALUE="D"
STYLE="position:absolute; top:300; left:400">
<INPUT NAME="btnL" TYPE="SUBMIT" VALUE="L"
STYLE="position:absolute; top:200; left:300">
<INPUT NAME="btnR" TYPE="SUBMIT" VALUE="R"
STYLE="position:absolute; top:200; left:500">
<INPUT NAME="btnM" TYPE="SUBMIT" VALUE="M"
STYLE="position:absolute; top:<%=iTop%>; left:<%=iLeft%>">
<INPUT NAME="hidL" TYPE="HIDDEN" VALUE="<%=iLeft%>">
<INPUT NAME="hidT" TYPE="HIDDEN" VALUE="<%=iTop%>">
</FORM>
<BODY>
</BODY>
</HTML>
|
再来看一下JavaScript代码:FiveButtons.htm
<HTML>
<SCRIPT language="JavaScript1.2" TYPE="TEXT/JAVASCRIPT">
function btnClick(s) {
if (s == "U")
this.btnM.style.top = parseInt(this.btnM.style.top) - 10;
if (s == "D")
this.btnM.style.top = parseInt(this.btnM.style.top) + 10;
if (s == "L")
this.btnM.style.left = parseInt(this.btnM.style.left) - 10;
if (s == "R")
this.btnM.style.left = parseInt(this.btnM.style.left) + 10;
if (s == "M") {
this.btnM.style.top = 200;
this.btnM.style.left = 400;
}
}
</SCRIPT>
<HEAD>
<TITLE>FiveButtons</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<INPUT NAME="btnU" TYPE="SUBMIT" VALUE="U"
STYLE="position:absolute; top:100; left:400"
onClick="btnClick(this.value)">
<INPUT NAME="btnD" TYPE="SUBMIT" VALUE="D"
STYLE="position:absolute; top:300; left:400"
onClick="btnClick(this.value)">
<INPUT NAME="btnL" TYPE="SUBMIT" VALUE="L"
STYLE="position:absolute; top:200; left:300"
onClick="btnClick(this.value)">
<INPUT NAME="btnR" TYPE="SUBMIT" VALUE="R"
STYLE="position:absolute; top:200; left:500"
onClick="btnClick(this.value)">
<INPUT NAME="btnM" TYPE="SUBMIT" VALUE="M"
STYLE="position:absolute; top:200; left:400"
onClick="btnClick(this.value)">
</BODY>
</HTML>
|
我们再来说一说JSP和Javas cript的搭配使用和相互访问。
也许你用过Delphi的WebBroker开发过Web Application当你每做的一件事(提交)就是一个WebAction,说白了,就是一个函数。而这个函数在ASP、JSP条件下就成了一个页面。不过你也应该把他们理解成函数,一个返回字符串的函数。而这个字符串,就是你在浏览器利用查看源文件菜单命令所看到的结果。这样,Javas cript调用Java变量的问题就迎刃而解了。我们的JSP返回的字符串有Javas cript代码,而这些代码是由浏览器解释执行的。由于Javas cript代码的生成都可以由JSP动态生成,所以,Javas cript中可以包含JSP代码的运行结果。这样就实现了Javas cript对JSP变量的调用。
下面我们再来看一看,Javas cript对JSP方法和JSP对Javas cript的调用。这两个调用都有一个共同点,那就是需要对页面进行提交,在用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 {
"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">
<s cript language="Javas cript1.4" TYPE="TEXT/JAVAs cript">
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)
|