当前页面: 开发资料首页 → JSP 专题 → 事件驱动的Web之旅——JSP与JavaScript的融合

事件驱动的Web之旅——JSP与JavaScript的融合

摘要: Java Delphi jsp JavaScript

（此文献给所有使用Delphi的程序员）

说正题之前，我先写个序吧！

我深爱着Delphi，不能自拔。可是我也看到了B/S是以后程序设计的大方向，多年更随Delphi，使我在这个时候选择Java/JSP（你知道吗？第一个尝试跨平台开发的语言是Pascal）。说句实话，在Windows的桌面开发领域Delphi当之无愧为老大。他是那么的快捷和方便，在学习Web的时候，我也带进了Delphi的思想，为什么Web不可以像Windows Application那样方面呢？基于事件驱动的，状态自动保持的（这其实是Windows的思想）。然而，学了Web开发才知道，当你要做一些让服务器知道得页面变动时，你就必须提交，提交可以改变页面的状态。当然，这也增加了保持页面状态的复杂性。不过不要紧，我们慢慢来。

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

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;

}

<head>

FiveButtons

</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%>">

</form>

<body>

</body>

</td></tr></table>

再来看一下JavaScript代码：FiveButtons.htm

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>

FiveButtons

</head>

<body>

<input NAME="btnU" TYPE="SUBMIT" VALUE="U"

STYLE="position:absolute; top:100; left:400"