事件驅動的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>

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

</HTML>

再來看一下JavaScript代碼：FiveButtons.htm

<HTML>

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>

</HEAD>

<BODY>

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

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