Transcript HTML網頁基礎語言

第7章 JSP的表單處理與Cookie






7-1
7-2
7-3
7-4
7-5
7-6
JSP狀態管理的基礎
URL參數傳遞
HTML表單欄位處理
HTML表單欄位驗證
Cookie處理
取得HTTP標頭和系統環境變數
7-1 JSP狀態管理的基礎


7-1-1 HTTP通訊協定的特性
7-1-2 狀態管理的種類
7-1-1 HTTP通訊協定的特性



HTTP通訊協定不會持續保持連線：當瀏覽程式
提出請求時才會建立連線，在請求後就斷線等待
回應，每一次請求和回應都需事先建立連線。
HTTP通訊協定並不會保留狀態：因為HTTP通訊
協定並不會保持連線，所以在連線時，伺服端和
客戶端互相知道對方，一旦請求結束，就互不相
干，使用者狀態並不會保留。
HTTP通訊協定與資料類型無關：任何種類的資
料都可以透過HTTP通訊協定傳送到客戶端，這就
是Content-Type標頭資訊指定的MIME資料類型。
7-1-2 狀態管理的種類-說明


狀態管理（State Management）是在
JSP程式間傳遞資料，以便不同的JSP程式
能夠保留使用者狀態。
狀態管理以狀態資訊儲存的位置，可以區
分成兩大類：儲存在客戶端和伺服端。
7-1-2 狀態管理的種類-客戶端的
狀態管理

客戶端的狀態管理是將資料儲存在使用者
電腦，或是儲存在JSP程式建立的網頁標籤
中，以便將資料傳遞給下一頁JSP程式，常
用的方法如下表所示：
使用方法
Cookies
表單欄位
URL 參數
說明
Cookies 是保留在使用者電腦的小檔案，檔案內容是
一些執行時所需的使用者資訊
使用 HTML 表單欄位內容傳遞資料到其它網頁
使用 URL 網址的參數來傳遞資料
7-1-2 狀態管理的種類-伺服端的狀
態管理

伺服端的狀態管理是將資料儲存在伺服端
的電腦，換句話說，狀態管理的使用者狀
態資訊會佔用伺服器的資源，常用的方法
如下表所示：
使用方法
application 隱含物件
session 隱含物件
資料庫
XML 文件
文字檔案
說明
使用 application 物件的變數儲存使用者資料
使用 session 物件的變數儲存使用者資料
使用資料庫的記錄儲存使用者資料
使用 XML 文件儲存使用者資料
使用 Java I/O 的文字檔案來儲存使用者資料
7-2 URL參數傳遞-說明


在瀏覽程式輸入的URL網址，或是JSP程式
將HTTP請求轉向到其它JSP程式時，都可
以使用URL參數來傳遞資料。
如果在URL網址附加有參數，JSP程式可以
使用request物件的方法，或JSTL的
param隱含物件來取得傳遞的參數值。
7-2 URL參數傳遞-方法1
在HTML超連結標籤<a href="">…</a>的
href屬性後加上參數，如下所示：
<a href="Ch7_2next.jsp?Username=陳會安
&amp;Password=1234"> </a>
 <jsp:include>動作元素使用<jsp:param>動
作元素傳遞參數，如下所示：

<jsp:include page="Ch7_2next.jsp“
flush="true">
<jsp:param name="Username" value="江小魚"/>
<jsp:param name="Password“ value="5678"/>
</jsp:include>
7-2 URL參數傳遞-方法2
<jsp:forward>動作元素使用<jsp:param>動作元素傳
遞參數，如下所示：
<jsp:forward page="Ch7_2next.jsp">
<jsp:param name="Username" value="張無忌"/>
<jsp:param name="Password" value="9012"/>
</jsp:forward>
 JSTL的<c:redirect>標籤也可以傳遞參數，使用
<c:param>標籤建立這些參數，如下所示：
<c:redirect url="Ch7_2next.jsp">
<c:param name="Username" value="小龍女"/>
<c:param name="Password" value="7890"/>
</c:redirect>
 HTML表單使用GET方法，詳細的說明請參閱下一節。

7-2 URL參數傳遞-取得URL傳遞的
參數值
在JSP程式是使用request物件的方法取得
URL參數值，如下所示：
username =
request.getParameter("Username");
password =
request.getParameter("Password");
 上述程式碼取得參數名稱是Username和
Password的值。

7-3 HTML表單欄位處理









7-3-1
7-3-2
7-3-3
7-3-4
7-3-5
7-3-6
7-3-7
7-3-8
7-3-9
HTML表單的用途
HTML標籤建立網頁表單
文字方塊與密碼欄位
文字區域
核取方塊
下拉式清單方塊
選擇鈕
隱藏欄位
同名與複選的表單欄位處理
7-3-1 HTML表單的用途

JSP程式是在伺服端執行，換句話說，客戶
端的HTML表單只是負責取得使用者輸入的
資料，然後將輸入資料送到伺服端進行處
理，如下圖所示：
7-3-2 HTML標籤建立網頁表單說明

在HTML標籤關於HTML表單的標籤只有5
個，如下表所示：
表單標籤
<form> … </form>
<input type=…>
說明
在 HTML 文件建立表單
輸入或選擇資料的表單欄位，包含按鈕和文字方
塊欄位，不同 type 屬性表示不同的欄位
<select> …. </select>
建立選單欄位，內含<option>標籤的選項
<option> …. </option>
選單欄位的選項
<textarea> ….
文字區域欄位
</textarea>
7-3-2 HTML標籤建立網頁表單-架構
網頁表單是上表HTML標籤的組合，基本表單的
架構如下所示：
<form name="name" method="post | get"
action="URL" enctype="MIME">
<input type=…>
<textarea> …. </textarea>
<select>
<option> …. </option>
</select>
<input type="submit" …>
</form>

7-3-2 HTML標籤建立網頁表單-屬性
說明
name屬性：表單名稱。
 method屬性：設定資料送出方式，主要是針對伺服端
處理，GET方法（不分大小寫）就是URL網址的參數傳遞，
請處理方式和上一節相同，POST方法是使用HTTP通訊協
定的標頭來傳遞欄位資料，如下所示：
<form name="order" method="post">
</form>
 action屬性：設定JSP表單處理程式所在的路徑，也可以
是URL網址，如下所示：
<form name="order" method="post"
action="Ch7_3_3.jsp">
</form>
 enctype屬性：設定表單資料傳送時的編碼方式，預設
使用application/x-www-form-urlencoded，除非使用
在上傳檔案，否則並不用設定此屬性。

7-3-3 文字方塊與密碼欄位-表單
欄位

文字方塊是使用最頻繁的表單欄位，因為它是直
接傳遞使用者輸入的資料，例如：姓名、地址、
電話等資料；密碼欄位只是輸入的字串以指定符
號取代，在使用上和文字方塊並沒有什麼不同。
7-3-3 文字方塊與密碼欄位-取得
欄位值
在JSP程式是使用request物件的
getParameter()方法，如下所示：
name = request.getParameter("Name");
password=
request.getParameter("Password");
 上述程式碼取得參數名稱是Name和Password的
值。在JSTL是使用param隱含物件來取得參數值，
表單欄位就是物件屬性，如下所示：
${param.Username}
${param.Password}

7-3-4 文字區域-表單欄位

文字區域和文字方塊都可以讓使用者輸入資料，
其輸入的資料是完整段落或整篇文字，特別適合
在地址、描述或備註等文字內容。
7-3-4 文字區域-取得欄位值
在JSP程式取得文字區域欄位內容，如下所示：
address = request.getParameter("Address");
out.print(address.replaceAll("\r\n","<br>"));
 上述程式碼取得名為Address文字區域的內容，
如果有換行，我們可以使用String物件的
replaceAll()方法，將換行符號取代成<br>標籤。
 在JSTL是使用param隱含物件來取得參數值，表
單欄位就是物件屬性，如下所示：
${param.Address}

7-3-5 核取方塊-表單欄位

核取方塊是一個開關，可以讓使用者選擇是否開
啟指定功能或設定某些參數，核取方塊欄位能夠
複選，因為每一個都是獨立的開關。
7-3-5 核取方塊-取得欄位值
核取方塊在表單欄位扮演的角色是一個開關，
JSP程式取得核取方塊欄位內容是檢查是否是null，
以判斷是否勾選，如下所示：
if (request.getParameter("Tel") != null) {
out.print("使用電話來確認<br>");
}
 在JSTL是使用param隱含物件來取得參數值，如
下所示：
<c:if test="${not empty param.Tel}">
使用電話來確認<br>
</c:if>

7-3-6 下拉式清單方塊-表單欄位

下拉式清單方塊和第7-3-7節選擇鈕的功能十分
相似，都是選擇題，只不過以不同方式來顯示，
而且下拉式清單方塊支援複選。
7-3-6 下拉式清單方塊-取得欄位值
JSP程式是使用request物件的
getParameter()方法取得下拉式清單方塊
各選項的value屬性值，如下所示：
int ship =
Integer.parseInt(request.getParamet
er("Ship"));
 在JSTL是使用param隱含物件來取得參數
值，表單欄位就是物件屬性，如下所示：
<c:set var="ship"
value="${param.Ship}"/>

7-3-7 選擇鈕-表單欄位

選擇鈕能夠在表單設計一組選項，在每一
個選項名稱旁有一個圓形的選項鈕，建立
多選一的單選題。
7-3-7 選擇鈕-取得欄位值

在JSP程式和JSTL是使用和下拉式清單方
塊相同的方法來取得使用者的選擇。
7-3-8 隱藏欄位-HTML標籤
隱藏欄位並不會在表單網頁顯示輸入介面，它是
直接將value屬性值傳送到伺服器，所以並不需
要使用者輸入資料或進行選擇。
 在HTML表單加上隱藏欄位的目的，就是將資料
傳遞到Web伺服器，在JSP程式常常用來傳遞一
些應用程式所需參數，例如：訂單號碼，或將上
一步驟的欄位值傳到下一步驟的表單網頁。隱藏
欄位的HTML標籤，如下所示：
<input type="HIDDEN" name="Order"
value="Order0001">

7-3-8 隱藏欄位-取得欄位值

JSP程式是使用與文字方塊相同的方式來取
得欄位值，如下所示：
<%
order = request.getParameter("Order");
%>
<c:out value="${param.Order}"
default="無編號"/>
7-3-9 同名與複選的表單欄位處理說明

在HTML表單的欄位名稱可能同名，而且下
拉式清單方塊允許複選，此時JSP程式是使
用request物件的getParameterValues()
方法，如下所示：
方法
String[]
getParameterValues(String)
說明
取得參數 String 表單欄位的所有內容
（表單可能擁有同名欄位或複選）
，傳
回值是 String 物件陣列，null 表示表單
欄位不存在
7-3-9 同名與複選的表單欄位處理取得欄位值1

JSP程式是使用request物件的
getParameterValues()方法取得選
擇的字串陣列，如下所示：
String[] langs =
request.getParameterValues("Languages");
for ( int i = 0; i < langs.length; i++ )
out.print("[" + langs[i] + "]");
7-3-9 同名與複選的表單欄位處理取得欄位值2

在JSTL處理同名與複選表單欄位是使
用paramValues隱含物件來取得欄位
值或選項，如下所示：
<c:forEach var="gift"
items="${paramValues.Gifts}">
[<c:out value="${gift}"/>]
</c:forEach>
7-4 HTML表單欄位驗證


7-4-1 網頁表單欄位的驗證方式
7-4-2 伺服端的表單欄位驗證
7-4-1 網頁表單欄位的驗證方式

在網頁表單欄位的驗證過程中，可以在兩
個地方進行把關，如下所示：
• 客戶端表單欄位驗證：客戶端欄位驗證是指在
尚未送到伺服端前，在客戶端的瀏覽程式進行
檢查，目前來說，主要是使用JavaScript或
VBScript等腳本語言進行表單欄位檢查。
• 伺服端表單欄位驗證：相對於客戶端的欄位驗
證，伺服端的表單欄位驗證是在資料送到伺服
端後，才進行資料檢查，也就是使用JSP程式
碼進行欄位檢查。
7-4-2 伺服端的表單欄位驗證-說明


JSP程式在取得表單欄位值後，在真正處理
前，可以使用if或JSTL的<c:if>標籤等條
件敘述來檢查使用者輸入的欄位資料是否
正確，或是忘了輸入指定的欄位資料。
如果輸入的資料錯誤，JSP程式並不會進行
處理，而是顯示錯誤訊息，然後回到表單
網頁要求使用者重新輸入。
7-4-2 伺服端的表單欄位驗證-圖例
7-5 Cookie處理



7-5-1 新增Cookie
7-5-2 取得Cookie值
7-5-3 刪除Cookie值
7-5 Cookie處理

Cookies的英文意義是小餅乾，源於這些儲
存在客戶端電腦的檔案尺寸都很小（1KB
左右），Cookies是儲存在瀏覽程式所在電
腦，而不是伺服端，所以並不會浪費伺服
器資源，其目的是記錄一些與使用者相關
的瀏覽資訊。
7-5-1 新增Cookie-建立Cookie
在瀏覽程式的客戶端電腦建立Cookie需要
在JSP程式建立Cookie物件，如下所示：
Cookie newCookie = new
Cookie("name", value);
 上述程式碼建立名為name的Cookie物件，
其值為value。
 接著我們需要設定Cookie存在期限的壽命，
如下所示：
newCookie.setMaxAge(3000);

7-5-1 新增Cookie-Cookie物件的方
法
方法
void setComment(String)
說明
指定和取得 Cookie 用途的說明字串為參數 String，
String getComment()
void setDomain(String)
指定和取得 Cookie 符合主機網域名稱的範本字串
String getDomain()
void setMaxAge(int)
int getMaxAge()
void setPath(String)
String getPath()
指定和取得 Cookie 最大期限的壽命，也就是儲存
在客戶端電腦的時間，以秒為單位
指定和取得 Cookie 的路徑字串，可以限制 Cookie
的存取只能在指定相對路徑的 JSP 程式
boolean getSecure()
指定和取得 Cookie 是否使用保密的通訊協定進行
存取
void setValue(String)
指定和取得 Cookie 的值
void setSecure(boolean)
String getValue()
String getName()
取得 Cookie 的名稱
7-5-1 新增Cookie-新增Cookie
最後請使用response隱含物件的
addCookie()方法來新增Cookie到客戶端
電腦，如下所示：
response.addCookie(newCookie);
 上述addCookie()方法的參數是Cookie物
件。

7-5-2 取得Cookie值-JSP
當客戶端電腦已經儲存有Cookie時，JSP程式可
以使用request隱含物件的getCookies()方法取
得Cookie的物件陣列，如下所示：
Cookie[] cookies = request.getCookies();
 取得Cookie物件陣列後可以使用for迴圈顯示每
一個Cookie的名稱和值，如下所示：
for ( int i = 0; i < cookies.length; i++ ) {
Cookie myCookie = cookies[i];
String name = myCookie.getName();
String value = myCookie.getValue();
……
}

7-5-2 取得Cookie值-JSTL

在JSTL是使用cookie物件來取得Cookie，
可以配合<c:forEach>迴圈標籤來顯示所
有的Cookie名稱和值，如下所示：
<c:forEach var="item" items="${cookie}">
Cookie名稱 : ${item.key} /
值 : ${item.value.value}<br>
</c:forEach>
7-5-3 刪除Cookie值

Cookie物件在setMaxAge()方法設定的期
限到時，就會自動刪除Cookie，不過，在
JSP程式可以使用同一個方法來馬上刪除
Cookie，如下所示：
myCookie.setMaxAge(0);
response.addCookie(myCookie);
7-6 取得HTTP標頭和系統環境變數


7-6-1 取得HTTP標頭資訊
7-6-2 取得系統環境變數
7-6-1 取得HTTP標頭資訊-方法

HTTP請求的標頭（HTTP Request Header）資
訊，可以提供客戶端請求和伺服器的相關資訊。
在JSP是屬於HttpServletRequest介面的方法，
如下表所示：
方法
String getHeader(String)
說明
取得參數 String 標頭名稱的字串值
int getIntHeader(String)
取得參數 String 標頭名稱的整數值
long getDateHeader(String)
取得參數 String 標頭名稱的長整數值
Enumeration
getHeaderNames()
取得所有 HTTP 標頭名稱的 Enumeration 物
件
Enumeration
getHeaders(String)
取得所有 String 標頭名稱值的 Enumeration
物件
7-6-1 取得HTTP標頭資訊-標頭名稱

HTTP常見的標頭資訊名稱和說明，如下表所示：
標頭名稱
Accept
Accept-Charset
Accept-Encoding
Accept-Language
Authorization
Connection
Content-Length
Cookie
Host
User-Agent
說明
瀏覽程式預設支援的 MIME 型態
瀏覽程式預設支援的字碼
瀏覽程式預設支援的編碼方式
瀏覽程式預設的語系，例如：zh-TW
認證資訊
連線狀態
針對 POST 訊息，其值為資料長度
Cookie 資料
URL 的主機名稱與埠號
瀏覽程式的種類和版本
7-6-2 取得系統環境變數
CGI 變數名稱
AUTH_TYPE
CONTENT_LENGTH
CONTENT_TYPE
PATH_INFO
方法
getAuthType()
getContentLength()
getContentType()
getPathInfo()
PATH_TRANSLATED
getPathTranslated()
QUERY_STRING
REMOTE_ADDR
REMOTE_HOST
REQUEST_METHOD
SCRIPT_NAME
SERVER_NAME
SERVER_PORT
SERVER_PROTOCOL
getQueryString()
getRemoteHost()
getRemoteAddr()
getMethod()
getServletPath()
getServerName()
getServerPort()
getProtocol()
說明
伺服端的認證方法
傳送給伺服器內容的長度
傳送內容的資料類型
Servlet 程式的路徑資訊，JSP 程式沒有
作用
Servlet 程式的實際路徑資訊，JSP 程式
沒有作用
URL 網址傳遞的參數資料
客戶端的 IP 位址
客戶端的主機名稱
HTTP 請求為 GET 或 POST 等方法
目前執行 JSP 程式的檔案路徑
伺服器的網域名稱或 IP 位址
HTTP 通訊協定的埠號
HTTP 通訊協定的版本