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

事件驱动的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;

    }

%>

再来看一下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)">

大家看一看效果对于用户来说是不是一样？(不能发太长，分次来，待续)