JSP第一篇：JSP介紹、工作原理、生命周期、語法、指令(修訂版)

么是JSP

JSP全名為Java Server Pages，java服務器頁面。JSP是一種基于文本的程序，其特點就是HTML和Java代碼共同存在！

為什么需要JSP

JSP是為了簡化Servlet的工作出現的替代品，Servlet輸出HTML非常困難，JSP就是替代Servlet輸出HTML的。

簡單使用一下JSP

在idea下生成一個JSP，我們來看一下JSP長什么樣子

看起來就像一個HTML頁面，前面也說了：JSP的特點就是HTML和Java代碼共同存在
我們向瀏覽器輸出一句HelloWorld，至于<%%>這個東西，我先不解釋！

JSP的工作原理

在Tomcat博客中我提到過：Tomcat訪問任何的資源都是在訪問Servlet！，當然了，JSP也不例外！JSP本身就是一種Servlet。為什么我說JSP本身就是一種Servlet呢？其實JSP在第一次被訪問的時候會被編譯為HttpJspPage類（該類是HttpServlet的一個子類）
剛才我簡單使用了一下JSP，它被編譯成了這么一個Servlet:

編譯過程是這樣子的：瀏覽器第一次請求1.jsp時，Tomcat會將1.jsp轉化成1_jsp.java這么一個類，并將該文件編譯成class文件。編譯完畢后再運行class文件來響應瀏覽器的請求。
以后訪問1.jsp就不再重新編譯jsp文件了，直接調用class文件來響應瀏覽器。當然了，如果Tomcat檢測到JSP頁面改動了的話，會重新編譯的。
既然JSP是一個Servlet，那JSP頁面中的HTML排版標簽是怎么樣被發送到瀏覽器的？我們來看下上面1_jsp.java的源碼就知道了。原來就是用write()出去的罷了。說到底，JSP就是封裝了Servlet的java程序罷了。

有人可能也會問：JSP頁面的代碼服務器是怎么執行的？再看回1_jsp.java文件，java代碼就直接在類中的service()中。

String s = "HelloWorda";
out.println(s);

JSP比Servlet更方便更簡單的一個重要原因就是：內置了9個對象！內置對象有：out、session、response、request、config、page、application、pageContext、exception，這幾個內置對象不在這里講。現在先知道一下即可！

JSP生命周期

JSP也是Servlet，運行時只有一個實例，JSP初始化和銷毀時也會調用Servlet的init()和destroy()方法。另外，JSP還有自己初始化和銷毀的方法

JSP的語法

JSP代碼可以分為兩部分：

模板數據：就是HTML代碼
元素：JSP頁面中的java代碼、JSP指令、JSP標簽

JSP腳本

JSP的腳本就是JSP頁面中的java代碼，也叫做scriptlet。JSP的腳本必須使用<%%>括起來，不然會被當成是模板數據的！
JSP腳本有三種方式：
<%%>【定義局部變量，編寫語句】
<%!%>【定義類或方法，但是沒人這樣用！】
<%=%>（也稱之為表達式輸出）【輸出各種類型的變量，int、double、String、Object等】
如果過多地使用<%%>會導致代碼混亂，JSP還提供了一種scriptlet標簽，使用此標簽和<%%>有相同的功能，只不過它更美觀了一些

<jsp:scriptlet>
 String s = "HelloWorld";
 out.println(s);
</jsp:scriptlet>

JSP注釋

<%--這是JSP注釋--%>
<%--%>
//這是java的當行注釋
//
/*這是java的多行注釋*/
/**/

JSP指令

JSP指令用來聲明JSP頁面的相關屬性，例如編碼方式、文檔類型等等

JSP指令的語法：

<%@指令 屬性名="值" %>

page指令

我在idea生成的JSP頁面就有page指令了。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

page指令常見屬性：
language="java"
extends="package.class"
import="{package.class | package.*}, …"
session="true | false"
buffer="none | 8kb | sizekb"
autoFlush="true | false"
isThreadSafe="true | false"
info="text"
errorPage="relative_url"
isErrorPage="true | false"
contentType="mimeType ;charset=characterSet " | "text/html ; charset=ISO-8859-1"
pageEncoding="characterSet | ISO-8859-1"
isELIgnored="true | false"
一般地，在eclipse或idea這些高級開發工具上開發，我們只需要在page指令中指定contentType="text/html;charset=UTF-8"，就不會出現中文亂碼問題！
當然了contentType 不僅僅可以指定以text/html的方式顯示，還可以使用其他的形式顯示出來。在conf/web.xml文件中可以查詢出來

比如，我以doc形式顯示jsp的數據

<%@ page contentType="application/msword;charset=UTF-8" language="java" %>
<html>
<head>
 <title>簡單使用JSP</title>
</head>
<body>
 1111
</body>
</html>

我們上網的時候，如果我們操作不當，或者服務器出錯了，頁面都是會出現友好提示的！這個也能通過page指令來實現跳轉到友好提示頁面上！
page指令errorPage=和isErrorPage這兩個屬性，下面我們來看一下怎么使用！
1.jsp出現了錯誤，通過page指令的errorPage屬性跳轉到error.jsp頁面上

<%@ page contentType="text/html;charset=UTF-8" language="java" errorPage="error.jsp" %>
<html>
<head>
 <title>該頁面出錯了！</title>
</head>
<body>
 <%--模擬頁面出錯了！！！--%>
 <%
 int result = 2 / 0;
 %>
 你好呀
</body>
</html>

error.jsp頁面要通過page指令的isErrorPage屬性設置頁面就是錯誤頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<html>
 <head>
 <title>友好提示頁面</title>
 </head>
 <body>
 服務器正忙著呢！
 </body>
</html>

下面是效果：

當然了，細心的朋友可以發現地址欄是沒有變化的，所以屬于是服務器跳轉。以上的做法是單個頁面設置的，如果我會有很多錯誤（JSP多的情況下，錯誤就會多），單個設置太麻煩了！
我們可以在web.xml文件中全局設置錯誤頁，只要發生了404錯誤或者空指針異常的錯誤都會跳轉到error.jsp頁面上

<error-page>
 <error-code>404</error-code>
 <location>/error.jsp</location>
</error-page>
<error-page>
 <exception-type>java.lang.NullPointerException</exception-type>
 <location>/error.jsp</location>
</error-page>

隨便輸個資源進行，會發生發404錯誤的，跳轉到錯誤頁面。下面是效果：

include指令

在講解request對象的時候，我們曾經使用過request.getRequestDispatcher(String url).include(request,response)來對頁頭和頁尾面進行包含
inclue指令也是做這樣的事情，我們來試驗一下吧！
這是頁頭

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>頁頭</title>
 </head>
 <body>
 我是頁頭
 <br>
 <br>
 <br>
 </body>
</html>

這是頁尾

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>頁尾</title>
</head>
<body>
我是頁尾
</body>
</html>

在1.jsp中把頁頭和頁尾包含進來

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>包含頁頭和頁尾進來</title>
</head>
<body>
<%@include file="head.jsp" %>
<%@include file="foot.jsp" %>
</body>
</html>

訪問1.jsp

include指令是靜態包含。靜態包含的意思就是：把文件的代碼內容都包含進來，再編譯！，看一下jsp的源代碼就知道了！

jsp還提供另一種包含文件的方式：JSP行為---動態包含。jsp行為在下面會講到！

taglib指令

JSP支持標簽技術，要使用標簽技術就先得聲明標簽庫和標簽前綴。taglib指令就是用來指明JSP頁面內使用標簽庫技術。
這里就不詳細說明了，等到學習JSP標簽的時候再使用吧！現在記住有這個指令即可。

JSP行為

JSP行為（JSP Actions）是一組JSP內置的標簽，只書寫少量的標記代碼就能夠使用JSP提供豐富的功能，JSP行為是對常用的JSP功能的抽象和封裝。

為什么我不把它直接稱為JSP標簽呢？我把這些JSP內置的標簽稱之為JSP行為，能夠和JSTL標簽區分開來。當然了，你也可以把它稱之為JSP標簽，你不要搞混就行了。我個人喜歡把這些JSP內置標簽稱之為JSP行為。

include行為

上面已經提及到了，include指令是靜態包含，include行為是動態包含。其實include行為就是封裝了request.getRequestDispatcher(String url).include(request,response)
include行為語法是這個樣子的

 <jsp:include page=""/>

我們先來使用一下把，在1.jsp頁面中也將頁頭和頁尾包含進來。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>包含頁頭和頁尾進來</title>
</head>
<body>
 <jsp:include page="head.jsp"/>
 <jsp:include page="foot.jsp"/>
</body>
</html>

訪問1.jsp頁面看一下效果：

使用jsp行為來包含文件，jsp源文件是這樣子的：

jsp行為包含文件就是先編譯被包含的頁面，再將頁面的結果寫入到包含的頁面中（1.jsp)
當然了，現在有靜態包含和動態包含，使用哪一個更好呢？答案是：動態包含。
動態包含可以向被包含的頁面傳遞參數（用處不大），并且是分別處理包含頁面的（將被包含頁面編譯后得出的結果再寫進包含頁面）【如果有相同名稱的參數，使用靜態包含就會報錯！】！
模擬一下場景吧，現在我的頭頁面有個名為s的字符串變量

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>頁頭</title>
 </head>
 <body>
 <%
 String s = "zhongfucheng";
 %>
 我是頁頭呀
 <br>
 <br>
 <br>
 </body>
</html>

我的頁尾也有個名為s的字符串變量

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>頁尾</title>
</head>
<body>
<%
 String s = "zhongfucheng";
%>
我是頁尾呀
</body>
</html>

現在我使用靜態包含看看會發生什么，出現異常了。

出現異常的原因很簡單，就是同一個文件中有兩個相同的變量s

使用動態包含就可以避免這種情況

param行為

當使用和行為引入或將請求轉發給其它資源時，可以使用行為向這個資源傳遞參數。

forward行為

在講解request對象的時候，我們使用request.getRequestDispatcher(String url).forward(request,response)進行跳轉。其實forward行為就是對其封裝！
我們來看一下forward的語法：

<jsp:forward page=""/>

好的，我們來使用一下吧。訪問1.jsp頁面就跳轉到head.jsp頁面中

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>訪問1.jsp就跳轉到head.jsp</title>
</head>
<body>
<jsp:forward page="head.jsp"/>
</body>
</html>

看一下效果

如果我要傳遞參數，就要在forward行為嵌套param行為
在跳轉到head.jsp時傳入參數username值為zhongfucheng

<jsp:forward page="head.jsp">
 <jsp:param name="username" value="zhongfucheng"/>
</jsp:forward>

在head.jsp頁面中獲取到傳遞過來的參數

<%
 String ss = request.getParameter("username");
%>
獲取到的參數是：
<%=ss%>

效果如下圖所示

directive行為

directive的中文意思就是指令。該行為就是替代指令<%@%>的語法的
相當于<%@include file="" %>
相當于<%@page %>
相當于<%@taglib %>
我們來試一下能不能用的

<jsp:directive.include file="head.jsp"></jsp:directive.include>
<jsp:directive.include file="foot.jsp"></jsp:directive.include>

看下效果，正常可以包含頁面：

使用該指令可以讓JSP頁面更加美觀！
使用scriptlet行為替代<%%>是同樣一個道理

javaBean行為

JSP還提供了操作javaBean對象的行為，在這里就不詳細說明了，后面會講到的！現在記住JSP提供了javaBean行為來操作簡單類即可！

<jsp:useBean id=""/>
<jsp:setProperty name="" property=""/>
<jsp:getProperty name="" property=""/>

文章來源：https://dwz.cn/OtXvyvh3
作者：Java3y

困難行業企業穩就業補貼”線上經辦系統已上線運行啦！符合條件的企業可通過上海市人力資源和社會保障自助經辦系統的“惠企點單辦”申請。具體步驟趕緊往下看：

登錄“上海市人力資源和社會保障自助經辦系統”（https://zzjb.rsj.sh.gov.cn/zzjbdl/jsp/login.html）。

選擇“困難行業企業穩就業補貼”事項，點擊“辦理”。

企業確認承諾書內容，點擊“下一步”。

系統自動檢驗后顯示企業相關信息，需填寫補貼申請經辦人信息。

企業可根據實際，點擊“登記/修改銀行賬號”進入銀行賬號修改界面，更改補貼擬發放賬戶信息。

系統自動提取企業統一社會信用代碼證書等電子資料，若提取失敗，須自行上傳相關影像資料，完成后點擊“下一步”。

確認申請信息無誤后（重點核對“銀行賬戶”“聯系手機”“上月應繳城鎮職工社會保險人數”等關鍵信息），點擊“確認提交”。

我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。

工具選擇

工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各種交互式圖表的創建。有免費版和收費版
joint.js http://www.jointjs.com/ joint.js 是另一個創建圖標庫的工具，也提供免費版和商業版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創建工具，小巧精悍，使用簡單
d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操作，非常強大。

最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。

構建靜態應用

下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創建一個jsPlumb的實例，并初始化jsPlumb的配置參數：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要創建一個節點（node），每一個節點可以用一個DIV來實現。我這里提供了一個函數來創建節點。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創建了一個DIV元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。

最后返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla

下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用于連接不同的節點。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實例

node是我們用addNode方法創建的Node實例

ports，是一個string的數組，指定端點的個數和名字

type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。

這里anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這里希望把端口畫在節點的左右兩側，并按照端口的數量均勻分布。

最后使用instance.addEndpoint來創建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。

下面一步我們提供一個函數來連接端點：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。

使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。

調用以上方法來創建節點，端點和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然后把第一個節點的out2端口連接到第二個端點的in端口。效果如下：

最后我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴于JQuery-UI,我還不是很清楚。

交互式創建節點

我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。

通常我們希望有一個tree view的控件，讓后通過拖拽來創建對應類型的節點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創建一個tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹上有兩個節點:

然后我實現從樹上拖拽對應的節點，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。

好了，一個繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務上了，大家有興趣可以去試試。

在線咨詢

上一篇：如何在JavaScript/Vue中獲取當前時間并格式化輸出精確到時分秒
下一篇：程序猿HTML5與原生javascript開發高級拖拽照片墻