事件驅(qū)動的Web之旅——JSP與JavaScript的融合
事件驅(qū)動的Web之旅——JSP與JavaScript的融合
（此文獻給所有使用Delphi的程序員）
說正題之前，我先寫個序吧！
我深愛著Delphi，不能自拔?？墒俏乙部吹搅薆/S是以后程序設(shè)計的大方向，多年更隨Delphi，使我在這個時候選擇Java/JSP（你知道嗎？第一個嘗試跨平臺開發(fā)的語言是Pascal）。說句實話，在Windows的桌面開發(fā)領(lǐng)域Delphi當(dāng)之無愧為老大。他是那么的快捷和方便，在學(xué)習(xí)Web的時候，我也帶進了Delphi的思想，為什么Web不可以像Windows Application那樣方面呢？基于事件驅(qū)動的，狀態(tài)自動保持的（這其實是Windows的思想）。然而，學(xué)了Web開發(fā)才知道，當(dāng)你要做一些讓服務(wù)器知道得頁面變動時，你就必須提交，提交可以改變頁面的狀態(tài)。當(dāng)然，這也增加了保持頁面狀態(tài)的復(fù)雜性。不過不要緊，我們慢慢來。
?
JSP與JavaScript的融合
說句極端的話，對于用戶來說，JSP和JavaScript的效果是一樣的？也許現(xiàn)在就開始有人扔雞蛋了。不過你想想，怎樣才能開發(fā)出理想的適合于用戶使用的Application呢？這當(dāng)然是站在用戶的角度。如果站在程序員的角度，我剛才的話會招來很多人嘲笑，但是對于用戶來說，他們不管你有多少代碼，不管你有什么樣的數(shù)據(jù)庫支持，不管你用的是起泡排序還是快速排序，他們關(guān)心的只是面子上的問題。本文也不是討論美工設(shè)計的。我這時要讓JSP和JavaScript達到相同的效果，不過這是對于用戶來說的。
也曾在CSDN的論壇上看到JSP的變量能不能被JavaScript調(diào)用，JavaScript可不可以控制JSP的問題，答案通常是兩種：第一種便是直截了當(dāng)?shù)幕卮稹安荒埽@根本是兩碼事”、第二種無非是比較誠懇“這一個是服務(wù)端、一個是客戶端，怎么可能，看看書吧”。其實，殊不知，這是一個非常值得探討的問題。
不過先別扯遠了，我們先看看在用戶的角度，JSP和JavaScript相同的效果。
?
程序一：一個方向控制程序，瀏覽器里有五個按鈕，上下左右中。點擊上面的按鈕中間的按鈕向上移動，點擊下面的按鈕中間的按鈕向下移動……以此類推，點擊中間的按鈕恢復(fù)初始狀態(tài)。
先來看一看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;
??? }
%>
?
?
再來看一下JavaScript代碼：FiveButtons.htm
?
STYLE="position:absolute; top:100; left:400"
onClick="btnClick(this.value)">
STYLE="position:absolute; top:300; left:400"
onClick="btnClick(this.value)">
STYLE="position:absolute; top:200; left:300"
onClick="btnClick(this.value)">
STYLE="position:absolute; top:200; left:500"
onClick="btnClick(this.value)">
STYLE="position:absolute; top:200; left:400"
onClick="btnClick(this.value)">
?
大家看一看效果對于用戶來說是不是一樣？(不能發(fā)太長，分次來，待續(xù))
?
下載文檔
