事件驅(qū)動(dòng)的Web之旅——JSP與JavaScript的融合

時(shí)間：2019-12-18 09:32:01

關(guān)鍵字： javascript jsp

手機(jī)看文章

掃描二維碼
隨時(shí)隨地手機(jī)看文章

[導(dǎo)讀]事件驅(qū)動(dòng)的Web之旅——JSP與JavaScript的融合（此文獻(xiàn)給所有使用Delphi的程序員）說(shuō)正題之前，我先寫個(gè)序吧！我深愛(ài)著Delphi，不能自拔。可是我也看到了B/S是以后程序設(shè)計(jì)的大

事件驅(qū)動(dòng)的Web之旅——JSP與JavaScript的融合

（此文獻(xiàn)給所有使用Delphi的程序員）

說(shuō)正題之前，我先寫個(gè)序吧！

我深愛(ài)著Delphi，不能自拔?？墒俏乙部吹搅薆/S是以后程序設(shè)計(jì)的大方向，多年更隨Delphi，使我在這個(gè)時(shí)候選擇Java/JSP（你知道嗎？第一個(gè)嘗試跨平臺(tái)開(kāi)發(fā)的語(yǔ)言是Pascal）。說(shuō)句實(shí)話，在Windows的桌面開(kāi)發(fā)領(lǐng)域Delphi當(dāng)之無(wú)愧為老大。他是那么的快捷和方便，在學(xué)習(xí)Web的時(shí)候，我也帶進(jìn)了Delphi的思想，為什么Web不可以像Windows Application那樣方面呢？基于事件驅(qū)動(dòng)的，狀態(tài)自動(dòng)保持的（這其實(shí)是Windows的思想）。然而，學(xué)了Web開(kāi)發(fā)才知道，當(dāng)你要做一些讓服務(wù)器知道得頁(yè)面變動(dòng)時(shí)，你就必須提交，提交可以改變頁(yè)面的狀態(tài)。當(dāng)然，這也增加了保持頁(yè)面狀態(tài)的復(fù)雜性。不過(guò)不要緊，我們慢慢來(lái)。

JSP與JavaScript的融合

說(shuō)句極端的話，對(duì)于用戶來(lái)說(shuō)，JSP和JavaScript的效果是一樣的？也許現(xiàn)在就開(kāi)始有人扔雞蛋了。不過(guò)你想想，怎樣才能開(kāi)發(fā)出理想的適合于用戶使用的Application呢？這當(dāng)然是站在用戶的角度。如果站在程序員的角度，我剛才的話會(huì)招來(lái)很多人嘲笑，但是對(duì)于用戶來(lái)說(shuō)，他們不管你有多少代碼，不管你有什么樣的數(shù)據(jù)庫(kù)支持，不管你用的是起泡排序還是快速排序，他們關(guān)心的只是面子上的問(wèn)題。本文也不是討論美工設(shè)計(jì)的。我這時(shí)要讓JSP和JavaScript達(dá)到相同的效果，不過(guò)這是對(duì)于用戶來(lái)說(shuō)的。

也曾在CSDN的論壇上看到JSP的變量能不能被JavaScript調(diào)用，JavaScript可不可以控制JSP的問(wèn)題，答案通常是兩種：第一種便是直截了當(dāng)?shù)幕卮稹安荒?，這根本是兩碼事”、第二種無(wú)非是比較誠(chéng)懇“這一個(gè)是服務(wù)端、一個(gè)是客戶端，怎么可能，看看書(shū)吧”。其實(shí)，殊不知，這是一個(gè)非常值得探討的問(wèn)題。

不過(guò)先別扯遠(yuǎn)了，我們先看看在用戶的角度，JSP和JavaScript相同的效果。

程序一：一個(gè)方向控制程序，瀏覽器里有五個(gè)按鈕，上下左右中。點(diǎn)擊上面的按鈕中間的按鈕向上移動(dòng)，點(diǎn)擊下面的按鈕中間的按鈕向下移動(dòng)……以此類推，點(diǎn)擊中間的按鈕恢復(fù)初始狀態(tài)。

先來(lá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;

??? }

再來(lái)看一下JavaScript代碼：FiveButtons.htm

FiveButtons

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