事件驅動的Web之旅——JSP與JavaScript的融合

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

事件驅動的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><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></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%>"><INPUT NAME="hidL" TYPE="HIDDEN" VALUE="<%=iLeft%>"><INPUT NAME="hidT" TYPE="HIDDEN" VALUE="<%=iTop%>"></FORM><BODY> </BODY></HTML>

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

<HTML><SCRIPT language="JavaScript1.2" TYPE="TEXT/JAVASCRIPT">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><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></HEAD> <BODY><INPUT NAME="btnU" TYPE="SUBMIT" VALUE="U"STYLE="position:absolute; top:100; left:400"onClick="btnClick(this.value)"><INPUT NAME="btnD" TYPE="SUBMIT" VALUE="D"STYLE="position:absolute; top:300; left:400"onClick="btnClick(this.value)"><INPUT NAME="btnL" TYPE="SUBMIT" VALUE="L"STYLE="position:absolute; top:200; left:300"onClick="btnClick(this.value)"><INPUT NAME="btnR" TYPE="SUBMIT" VALUE="R"STYLE="position:absolute; top:200; left:500"onClick="btnClick(this.value)"><INPUT NAME="btnM" TYPE="SUBMIT" VALUE="M"STYLE="position:absolute; top:200; left:400"onClick="btnClick(this.value)"></BODY></HTML>

我們再來說一說JSP和Javas cript的搭配使用和相互訪問。也許你用過Delphi的WebBroker開發過Web Application當你每做的一件事（提交）就是一個WebAction，說白了，就是一個函數。而這個函數在ASP、JSP條件下就成了一個頁面。不過你也應該把他們理解成函數，一個返回字串的函數。而這個字串，就是你在瀏覽器利用查看源檔案功能表命令所看到的結果。這樣，Javas cript調用Java變數的問題就迎刃而解了。我們的JSP返回的字串有Javas cript代碼，而這些代碼是由瀏覽器解釋執行的。由於Javas cript代碼的產生都可以由JSP動態產生，所以，Javas cript中可以包含JSP代碼的運行結果。這樣就實現了Javas cript對JSP變數的調用。下面我們再來看一看，Javas cript對JSP方法和JSP對Javas cript的調用。這兩個調用都有一個共同點，那就是需要對頁面進行提交，在用Hidden設定幾個隱藏參數。JSP根據獲得的參數再進行相應的處理，就可以了。也許有的人已經不太明白了，那我們還是用一個程式來說明問題吧！程式二：一個伺服器獲得用戶端資訊的Web頁面。他獲得了用戶端的一些螢幕設定，並把它們記錄在資料庫裡。GetClientInfo.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" %><%@ import="java.sql.*" %><HTML><HEAD><TITLE>Information</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"><STYLE TYPE="text/css">TABLE, BODY { "Courier New"; font-size: 10pt;}</STYLE></HEAD><BODY><% if(request.getParameter("isHaveData") == null){ %> <FORM NAME="frmClient" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="isHaveData" VALUE=""> <INPUT TYPE="HIDDEN" NAME="iScreenWidth"> <INPUT TYPE="HIDDEN" NAME="iColorDepth"> <INPUT TYPE="HIDDEN" NAME="iScreenHeight"> <INPUT TYPE="HIDDEN" NAME="sBrowseName"> <INPUT TYPE="HIDDEN" NAME="sBrowseVer"> <INPUT TYPE="HIDDEN" NAME="iClientHeight"> <INPUT TYPE="HIDDEN" NAME="iClientWidth"> <s cript language="Javas cript1.4" TYPE="TEXT/JAVAs cript"> frmClient.iScreenWidth.value = screen.width; frmClient.iScreenHeight.value = screen.height;

frmClient.iColorDepth.value = screen.colorDepth; frmClient.sBrowseName.value = navigator.appName; frmClient.sBrowseVer.value = navigator.appVersion;

frmClient.iClientHeight.value = screen.availHeight; frmClient.iClientWidth.value = screen.availWidth; frmClient.submit(); </SCRIPT> </FORM> <% } else { %> <OBJECT id=objMSAgentclassid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F width="32" height="32"></OBJECT> <SCRIPT language="JavaScript1.4" TYPE="TEXT/JAVASCRIPT"> var MerlinID; var MerlinACS; objMSAgent.Connected = true; MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS); Merlin = objMSAgent.Characters.Character(MerlinID); Merlin.Show(); Merlin.Play("Surprised"); Merlin.Speak("<%= "Hello?" %>"); Merlin.Play("GestureLeft"); Merlin.Think("<%= "This is a jsp variant" %>"); Merlin.Play("Pleased"); Merlin.Think("<%= "JavaScript uses jsp variants" %>"); Merlin.Play("GestureDown"); Merlin.Speak("<%= "Bye! so Easy!" %>"); Merlin.Hide(); function LoadLocalAgent(CharID, CharACS) { LoadReq = objMSAgent.Characters.Load(CharID, CharACS); return(true); } </SCRIPT> <TABLE> <TR><TD COLSPAN="2"><FONT COLOR="#FF0000">your infomation:</FONT></TD></TR> <TR><TD>Screen Width:</TD><TD><%= request.getParameter("iScreenWidth") %></TD></TR> <TR><TD>Screen Height:</TD><TD><%= request.getParameter("iScreenHeight") %></TD></TR> <TR><TD>Color Depth:</TD><TD><%= request.getParameter("iColorDepth") %></TD></TR> <TR><TD>Browse Name:</TD><TD><%= request.getParameter("sBrowseName") %></TD></TR> <TR><TD>Browse Version:</TD><TD><%= request.getParameter("sBrowseVer") %></TD></TR> <TR><TD>Client area Width:</TD><TD><%= request.getParameter("iClientWidth") %></TD></TR> <TR><TD>Client area Height:</TD><TD><%= request.getParameter("iClientHeight") %></TD></TR> </TABLE> <% String strDSN = "jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=" + application.getRealPath("//WEB-INF//msg.mdb"); Connection cnct = null; Statement stmt = null; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); cnct = DriverManager.getConnection(strDSN,"",""); stmt = cnct.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_UPDATABLE); java.text.DateFormat dfNow = java.text.DateFormat.getDateTimeInstance( java.text.DateFormat.MEDIUM,java.text.DateFormat.MEDIUM); String strDate = dfNow.format(new java.util.Date()); String sInsertSQL = "INSERT INTO ClientMsg VALUES(" + "/'" + request.getRemoteAddr() + "/'," + "/'" + strDate +"/'," + "/'" + request.getParameter("iScreenWidth") + "/'," + "/'" + request.getParameter("iScreenHeight") + "/'," +
"/'" + request.getParameter("iColorDepth") + "/'," +

"/'" + request.getParameter("sBrowseName") + "/'," + "/'" + request.getParameter("sBrowseVer") + "/'," + "/'" + request.getParameter("iClientWidth") + "/'," + "/'" + request.getParameter("iClientHeight") + "/');"; stmt.executeUpdate(sInsertSQL); %> <P><FONT COLOR="#FF0000">The information of other visitors:</FONT></P> <% ResultSet RS = stmt.executeQuery("SELECT * FROM ClientMsg"); while(RS.next()){ %> <TABLE> <TR><TD COLSPAN="2"><HR SIZE="1"></TD></TR> <TR><TD COLSPAN="2"><STRONG><FONT COLOR="#0000FF"><%=RS.getString("IP")%> at <%=RS.getString("Time")%> visited this Page</FONT></STRONG></TD></TR> <TR><TD>Screen Width:</TD><TD><%= RS.getString("ScreenWidth") %></TD></TR> <TR><TD>Screen Height:</TD><TD><%= RS.getString("ScreenHeight") %></TD></TR> <TR><TD>Color Depth:</TD><TD><%= RS.getString("ColorDepth") %></TD></TR>

<TR><TD>Browse Name:</TD><TD><%= RS.getString("BrowseName") %></TD></TR> <TR><TD>Browse Version:</TD><TD><%= RS.getString("BrowseVer") %></TD></TR> <TR><TD>Client area Width:</TD><TD><%= RS.getString("ClientWidth") %></TD></TR> <TR><TD>Client area Height:</TD><TD><%= RS.getString("ClientHeight") %></TD></TR> </TABLE> <% } RS.close(); RS = null; stmt.close(); cnct.close(); stmt = null; cnct = null; }%><BR></BODY></HTML>這個Web運行時，首先用JavaScript獲得用戶端的資訊，然後自動認可頁面，提交後JSP會記錄相應資訊，並儲存在資料庫裡，然後再把所有的訪問者的情況從資料庫裡讀出來顯示。在這個程式裡還調用了MSAgent他所顯示的文字全都是JSP的變數，當然你也可以設定成別的。本程式還用到了資料庫，是Accsess，一個放於 %YOURAPP%/WEB-INF/msg.mdb的檔案。裡面有一個表ClientMsg。有幾個欄位：

好的例子一個足已！也許你會說，不就是提交嗎？對，下一次我們講的就是提交的藝術。（運行環境 IE6、TOMCAT4.1.x JDK1.4.x）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More