Post on 05-Jun-2020
www . i t s c i .m ju . ac . t h / sayan
PROCESSING THE CLIENT REQUEST
SAYAN UNANKARD1/2562
2
FORM ATTRIBUTES
ถกออกแบบมาพอใหสามารถสง input จาก client ไปยง server
ประกอบไปดวยสอง attributes หลก
• Action: เปนคอมโพเนนททางดาน server side ทเกยวของเมอ form ถก submit
• Method: เปนเมธอดทใชเกยวกบ form โดยปกตจะใช GET หรอ POST
GET & POST: สงขอมลใน URL
<input> tag ใชส าหรบการรบขอมล
2
COLLECTING INFORMATION
form ท าหนาทใหบรการในรปของ container ทเกบ controls ตาง ๆ เชน text fields, labels, buttons, และ images
Form tags:
<FORM NAME="frmName" ACTION="Filename" METHOD="GET">
<!--form elements go inside of form tags -->
</FORM>
3
CONTROL ELEMENTS’ ATTRIBUTES
TYPE: ใชส าหรบการระบ input type
NAME: แตละ control ภายใน form จะตองม NAME ขอมลทถกน าเขาโดยผใชจะถกรบเขามาโดยการอางถงชอของ control field แตหากไมม name ขอมลจะไมสามารถรบไดโดย control field
VALUE: คา default value อาจถกก าหนดใหแก control element
ACTION: ใชส าหรบระบปลายทางของ Web page หรอ agent ท form ถกโปรเซส
METHOD: ระบวธการสง form ไปยง Web server ไมวาจะเปน POST หรอ GET
4
A TEXT INPUT WITH DEFAULT VALUE
• input fields ทอยภายใน form จะถกเรยกวา controls และบอยครงจะถกใชรวมกบ<INPUT> tag
<FORM><INPUT TYPE ="TEXT" NAME="txtField" VALUE="This is the default text">
</FORM>
5
TEXT
สองเมธอดหลกทใชในการรบขอมลแบบ text<input type=“text” name=“t1”>
• โดยปกตจะเปนขอความเพยงหนงบรรทด
• สามารถก าหนด size attribute เพอควบคมความยาวของ textbox
<textarea name=“t2”></textarea>
• ใชในกรณทตองการแสดงขอความมากกวาหนงบรรทด
• สามารถก าหนด cols attribute ภายใน textarea
• สามารถก าหนด rows attribute ภายใน textarea
6
ความแตกตางระหวาง GET & POST
ในทางเทคนคแลว HTML specifications ไดก าหนดความแตกตางระหวาง "GET" และ "POST" ไว โดยเมธอด GET จะหมายถงขอมลจาก form จะถก encoded (โดย browser) ภายใน URLในขณะทเมธอด POST จะหมายถงขอมลภายใน form จะปรากฏภายใน message body
แต specifications ไดแนะน าการใชงานของเมธอด "GET" ไวใหใชส าหรบการรบคาขอมลของ form ในขณะท POST จะใชงานไดทกประเภท ไมวาจะเปนการจดเกบขอมล การ update ขอมล หรอการสง E-mail ได
หากขอมลอยในรปของ non-ascii การใชเมธอด GET อาจกอใหเกดปญหาทเกยวกบความถกตองของขอมลในการสงไปยง Server ได
7
<FORM NAME="frmName" ACTION="Hello.jsp" METHOD="POST">
Your First Name:<INPUT TYPE ="TEXT" NAME="firstName"><br>
Your Middle Name:<INPUT TYPE ="TEXT" NAME="middleName"><br>
Your Last Name:<INPUT TYPE ="TEXT" NAME="lastName">
</FORM>
FORM ELEMENTS EXAMPLE
8
SUBMITTING FORM FOR PROCESSING
เมอตองการโปรเซสขอมลใน form จ าเปนจะตอง submit form ไปยงเซรฟเวอร และจากนนจะเปนการรบและโปรเซสขอมลทเซรฟเวอร
ในการ submit form เมธอด submit() ภายใน form จะตองถกเรยกใชดงน
• ใช Submit button
• ถกเรยกใชจากเมธอด submit() ภายใน form
9
SUBMIT + RESET
รปแบบของ submit จะมดงน
<input type=“submit” value=“Let’s go”>
เมอ submit ถก pressed คอมโพเนนททางดาน server mก าหนดไวใน action attribute ของ<form> จะถกเรยกใช
สวน reset จะใชส าหรบการเคลยรคาภายใน form โดยมรปแบบดงน
<input type=“reset” value=“Clear Form”>
10
USING SUBMIT BUTTON
<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">Your First Name:<INPUT TYPE ="TEXT" NAME="firstName"><br>
Your Middle Name:<INPUT TYPE ="TEXT" NAME="middleName"><br>
Your Last Name:<INPUT TYPE ="TEXT" NAME="lastName"><br>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
11
SUBMIT BUTTON
12
RADIO BUTTONS
ใชในกรณทมทางเลอกหลายทางแตสามารถเลอกไดเพยงทางเดยว
การใชงานสามารถท าไดโดยการคลกเมาสทต าแหนงของ radio ทตองการ
<input type=“radio” name=“card” value=“visa”>
Name จะตองใชชอเดยวกนทง group
13
RADIO BUTTON
<FORM NAME="frmName" METHOD="GET"><b>Radio Button</b> <BR>
Do you wish to hear from us again. <BR><BR>
<b>Yes</b> <input type="radio" name=items value=“0” ><BR>
<b>No</b> <input type="radio" name=items value=“1” ><BR>
</FORM>
14
CHECKBOX
ใชในกรณทตองการเลอกรายการทก าหนดมากกวาหนงรายการ โดยมรปแบบดงน
<input type=“checkbox” value=“html” name=“pre”>
Name จะตองใชชอเดยวกนทง group
15
CHECK BOX
<FORM NAME="frmName" METHOD="GET"><b>CHECKBOXES</b> <BR>
List your preferences<BR>(Tick all that apply)<BR><BR>HTML <input type="checkBox" name="items" value="0"> <BR>JAVA <input type="checkBox" name="items" value="1"> <BR>MySql <input type="checkBox" name="items" value="2"> <BR>JDBC <input type="checkBox" name="items" value="3">
</FORM>
16
SELECTION
Used for drop down lists
<select name=“s1”><option value=“1”>Dublin South</option>
<option value=“2”>Dublin North</option>
<option value=“3”>Co. Dublin</option>
<option value=“4”>Culchie</option>
</select>
17
EXPLICITLY CALL THE SUBMIT METHOD
<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">
Your First Name:<INPUT TYPE = "TEXT" NAME="firstName"><br>
Your Mid Name:<INPUT TYPE = "TEXT" NAME="midName"><br>
Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>
<INPUT TYPE=BUTTON VALUE="Submit" onclick=“validateForm()”>
<INPUT TYPE=RESET VALUE="Reset">
</FORM>
หมายเหต การใช TYPE=BUTTON จะยอมใหมการเรยกใชเมธอด validateForm() ซงใชส าหรบ
การ validates ขอมลจากผใช หากขอมลถกตองจะเรยกใชเมธอด
document.frmName.submit() หรอท าการแสดงผลซ าเพอใหผใชแกไข18
GET METHOD
Form data ทถกระบตอทาย URL ทตองการหลงเครองหมาย ? (question mark)
URL เปนเพยงคาเดยวทถกระบในรปคาของ ACTION ภายในฟอรม
หากไมไดมการก าหนด explicitly METHOD attribute ไวส าหรบ form โดย default แลว form จะถกสงไปโดยใชเมธอด GET
19
GET METHOD
<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="GET">
Your First Name:<INPUT TYPE = "TEXT" NAME="firstName"><br>
Your Mid Name:<INPUT TYPE = "TEXT" NAME= "midName"><br>
Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>
<INPUT TYPE=SUBMIT VALUE="Submit">
<INPUT TYPE=RESET VALUE="Reset">
</FORM>
20
SUBMIT A FORM WITH THE GET METHOD
21
การสงคาจะตอจากเครองหมาย ? โดยระบชอตวแปร=คาทตองการ ตวแปรถดไปคนดวยเครองหมาย &
GET USER INFORMATION
22
POST METHOD
• เมอใชเมธอด POST ขอมลใน form element จะถกสงไปยงเซรฟเวอรในรปของ transaction message body
• เมธอด POST จะแตกตางจากเมธอด GET ตรงทไมมการ append ขอมลใน form element ไปยง URL
• หมายเหต เมอใชเมธอด POST ในกรณทจ าเปนอาจสราง query string โดยแนบไปกบ URL ของ ACTION attribute ไดโดยตรง
<Form name="frmName" Action="getText.jsp?action=update">
23
หลงจาก submit form ขอมลจะสงผาน URL แสดง query string
POST METHOD
24
THE IMPLICIT OBJECTS
ในการโปรเซส client request Web server จะตองประมวลผลตามขนตอนดงตอไปน : 1. รบคาขอมลทเกยวของกบ request
2. โปรเซสขอมล
3. สง output ไปยง client
เมอใช scripting elements ใน JSP page จะมจ านวน objects ทถกเตรยมพรอมไวโดย JSP container ซงออปเจคเหลานนจะถกเรยกวา implicit objects ทงนเนองจากผใชสามารถน าไปใชโดยไมตองมการประกาศตวแปรออปเจคไวใน page
25
THE IMPLICIT OBJECTS
implicit objects ถกก าหนดไวใชส าหรบการท างานโดย JSP container
โดยสามารถน าไปใชไดทนทโดยไมตองมการประกาศ
เปน instances ของคลาสทถกก าหนดไวโดย servlet และ JSP specifications
น าไปใชไดเฉพาะภายใน scriptlets หรอ expressions ไมสามารถใชไดในสวนของ declarations
Implicit objects ไมสามารถใชไดกบ directives เชน “page” directive.
เนองจาก JSP pages ใชเทคโนโลยของ servlet ดงนน implicit objects จะถกสบทอดมาจากคลาสซงเปนสวนหนงของ servlet packages
26
SERVLET CLASS HIERARCHY
27
IMPLICIT OBJECTS
Object Class
application javax.servlet.ServletContextconfig javax.servlet.ServletConfigexception java.lang.Throwableout javax.servlet.jsp.JspWriterpage java.lang.Objectrequest javax.servlet.ServletRequestresponse javax.servlet.ServletResponsesession javax.servlet.http.HttpSession
28
STORING FORM INFORMATION
ใช request ออปเจคในการรบขอมลจาก form
JSP ใชตวแปรในการจดเกบคาทตองการจาก form
ในการใชตวแปรจะตองท าการประกาศกอนเสมอ
ชอของตวแปรจะตองเปนไปตามทก าหนดไวในเงอนไขการตงชอของจาวา
• โดยสามารถเปนตวอกษร ตวเลข และเครองหมาย underscores
• ไมสามารถเรมตนดวยตวเลข
• โดยปกตจะเรมจากอกษรตวเลก และอกษรตวใหญตนค าถดไป
• เปนแบบ case sensitive
29
REQUEST OBJECT
แตละครงทมการ request ไปยง JSPpage JSP container จะท าการสราง instance ใหมของrequest ออปเจค
• JSP container จะท าการสราง new instance จากคลาสjavax.servlet.http.HttpServletRequest
• โดยใชชอวา request และพรอมใชงานทนท
30
REQUEST OBJECT
ออปเจคนจะประกอบไปดวยขอมลของการ request และ page ทเกยวของ
• headers
• client and server information
• request URL
• input data
• cookies
• session
31
READING FORM DATA
ออปเจค request จะประกอบไปดวยสามเมธอดส าหรบการ extracting form ขอมล :
• getParameter() : ใชในการ retrieve คา form พารามเตอรเดยว
• getParameterValues() : ใชส าหรบ retrieve รายการคาของ form เชน รายการของcheckboxes ทถกเลอก
• getParameterNames() : ใชส าหรบการ retrieve รายละเอยดทสมบรณของพารามเตอรทกตวทถก submitted โดยผใช
32
GETPARAMETER() METHOD
ใชส าหรบการอานคาพารามเตอรเดยวจาก form เมธอดจะคนคาทเปนไปไดดงน:
• String: เปนพารามเตอรของ form
• Empty String: มพารามเตอรแตไมมคา
• null: ไมมพารามเตอร
พงระลกไวเสมอวา form elements จะเปนแบบ case sensitive
request.getParameter(“elementName”)
elementName หมายถงชอของ textbox หรอ radio เปนตน
เชน request.getParameter(“fname”);
request.getParameter(“lname”);
33
USING BASIC JSP TECHNIQUES
34
<HTML><HEAD><TITLE>Sign-in sheet</TITLE></HEAD><BODY>
<table border=0><tr> <td colspan=2 align=center> <font color=blue size=6>
Sign-in Sheet Template for my Basic JSP Techniques Seminar </font><br><br> </td></tr>
<tr> <td align=right>Your Name:</td><td align=left><input name="name" size=25></td>
</tr><tr> <td align=right>Your Major:</td>
<td align=left><input name="major" size=25> </td>
</tr>
<tr>
<td align=right>Preferred Seminar Date:</td>
<td align=left><input name="date" size=25></td>
</tr>
EXAMPLE
35
<tr>
<td colspan=2 align=center><input type="submit" value="Submit">
<input type= "reset">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
EXAMPLE (CONT)
36
USING BASIC JSP TECHNIQUES
37
<HTML><HEAD><TITLE>Sign-in sheet</TITLE></HEAD> <BODY>
<% String yourName = request.getParameter("name");
String yourMajor = request.getParameter("major");
String date = request.getParameter("date");
%>
Name: <%= yourName %><br>
Major: <%= yourMajor %><br>
Preferred Seminar Date: <%= date %><br><br>
Hello, <%= yourName %> : <br><br>
<font color=blue size = 5>Welcome to <font color=red>'JSP Basics'</font> Seminar</font> <br>
Please sign this sheet and bring it with you when you attend the seminar on <%= date %>. <br>
Your Signature: ______________
</BODY></HTML>
TEST1.JSP
38
GETPARAMETERVALUES() METHOD
ใชส าหรบอานคาพารามเตอรหลาย ๆ ตวจาก form โดยใชชอเดยวกน
ตวอยางเชน รายการของ checkboxes ทมชอเดยวกน และตองการระบวาอนไหนทถกเลอก
เมธอดจะคนคาในรปของ Array ของ Strings
• หาก array ทประกอบไปดวย empty string หนงคาจะเปนการระบวามพารามเตอรแตไมมคา
• Null : เปนการระบวาไมมพารามเตอร
39
GETPARAMETERVALUES() METHOD
ตวอยางหนาจอ
เลอกความถนด <BR>(เลอกไดมากกวา 1 รายการ) :
<input type="checkBox" name="citems" value="HTML">HTML<BR>
<input type="checkBox" name="citems" value="JAVA">JAVA<BR>
<input type="checkBox" name="citems" value="MySQL">MySql<BR>
<input type="checkBox" name="citems" value="JDBC">JDBC <BR>
การรบคา
String[] chkitems = request.getParameterValues("citems");
การแสดงผล
ความถนด : <% for(int i=0;i< chkitems.length;i++) { %>
<%= chkitems[i] %>,
<% } %>
40
GETPARAMETERNAMES() METHOD
คนคาในรปของ Enumeration ออปเจค
โดยการอานคาของ enumeration ออปเจคจะสามารถอานชอของพารามเตอรทกตวทอยใน form แลวถกสงไปยง servlet ได
หมายเหต Servlet API จะไมไดท าการระบล าดบชอของพารามเตอรทปรากฏ
41
JSP PAGE
42
<HTML><HEAD><TITLE>Dynamic Form</TITLE></HEAD><BODY>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR> <TD> FirstName: </TD><TD><INPUT TYPE=TEXT NAME=FirstName></TD> </TR>
<TR> <TD> LastName: </TD><TD> <INPUT TYPE=TEXT NAME=LastName></TD> </TR>
<TR> <TD> Address: </TD><TD><INPUT TYPE=TEXT NAME=Address></TD> </TR>
<TR> <TD> City: </TD><TD> <INPUT TYPE=TEXT NAME=City> </TD> </TR>
<TR> <TD> Zip: </TD><TD> <INPUT TYPE=TEXT NAME=Zip> </TD> </TR>
<TR> <TD> </TD><TD> <INPUT TYPE=SUBMIT VALUE="SUBMIT"> </TD> </TR>
</TABLE></BODY>
</HTML>
CONVERSION TO CODE : TEST2.JSP
43
CONVERSION TO CODE USING ARRAY : TEST2_1.JSP
<HTML><HTML><HEAD><TITLE>Dynamic Form</TITLE></HEAD><BODY><FORM ACTION="Test3.jsp" METHOD="GET"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><% String[] textFields = {"FirstName","LastName","Address","City","Zip”};
for(int j=0; j<textFields.length; j++){ %><TR><TD> <%=textFields[j]%> : </TD>
<TD><INPUT TYPE=TEXT NAME=<%=textFields[j]%>> </TD></TR>
<%}%>
</TABLE><INPUT TYPE=SUBMIT VALUE=SUBMIT></FORM></BODY></HTML>
44
JSP PAGE
45
EXAMPLE JSP PAGE : TEST3.JSP
<HTML><BODY><B>Form Content</B><BR><TABLE BORDER = 1 CELLSPACING=0 CELLPADDING=0>
<% java.util.Enumeration param = request.getParameterNames();while(param.hasMoreElements()){
String paramName =(String) param.nextElement();String paramValue = request.getParameter(paramName);
%><TR>
<TD><%=paramName%></TD><TD><%=paramValue%></TD>
</TR>
<% } %>
</TABLE>
</BODY>
</HTML>
46
JSP PAGE
47
HEADER INFORMATION
HTTP requests สามารถมจ านวน HTTP headers ทเกยวของ
headers เหลานไดจดเตรยมขอมลพเศษทเกยวของกบ request ไว
ผใชสามารถใชขอมลเกยวกบ header ในการ customize คา content ทสงไปยง client
48
GETTING HEADER INFORMATION
ประกอบไปดวยสองเมธอด :request.getHeader(“header name”);
• คนคา string ทมคาของ header name
• ท างานเชนเดยวกบ request.getParameter()
• ยกเวน header names จะไมไดเปน case sensitive
• ตวอยางเชน: request.getHeader(“accept-language”) เปนการระบภาษาทเปนdefault ทตดตงอยบน client machine
request.getHeaderNames();
• คนคา Enumeration ออปเจคทประกอบดวยขอมลเกยวกบ header ทงหมด
• ท างานเชนเดยวกบ request.getParameterNames()
49
GETTING HEADER INFO : TEST4.JSP
<%@ page import="java.util.*" %><HTML><HEAD><TITLE>Header information</TITLE></HEAD><BODY><%
String action = request.getParameter("action");if (action !=null && action.equals("getHeader")) {
%><% Enumeration enu = request.getHeaderNames(); %><table border=1>
<tr>
<td align=center colspan=2>Get header information using the request object</td>
</tr>
<tr>
<td align=center>Header Name</td>
<td align=center>Header Value</td>
</tr>
50
GETTING HEADER INFO – TEST4.JSP
<% while(enu.hasMoreElements()){
String headerName = (String) enu.nextElement();
%>
<tr>
<td> <%= headerName %> </td>
<td> <%= request.getHeader(headerName)%></td>
</tr>
<%}%>
</table>
<%} else{ %>
<a href="Test4.jsp?action=getHeader"> Request a page and display headers</a>
<% } %>
</BODY>
</HTML>
51
HEADER INFORMATION
52
GET CLIENT AND SERVER INFORMATION
เมธอดอนๆ ของ request ออปเจคจะใชส าหรบการหาคา• ชอของคอมพวเตอรของ Client:
<%= request.getRemoteHost() %>
• Client IP address:
<%= request.getRemoteAddr() %>
• ชอของ Web server:
<%= request.getServerName() %>
• หมายเลข port ของ Web server:
<%= request.getServerPort() %>
53
GET CLIENT AND SERVER INFORMATION : TEST5.JSP
<HTML>
<HEAD><TITLE>Client/server information</TITLE></HEAD>
<BODY>
Client Information:<br><font face="Arial" size=1>
Your computer name: <%= request.getRemoteHost()%><br>
Your IP address: <%= request.getRemoteAddr() %></font><br>
The Web server information:<br><font face="Arial" size=1>
The web server name:<%= request.getServerName()%><br>
The running port number of the Web server:
<%= request.getServerPort()%></font>
</BODY>
</HTML>
54
GET CLIENT AND SERVER INFORMATION : TEST5.JSP
55
RESPONSE OBJECT
• ใชควบคม output ท server สงไปยง client
• เปน Instance จากคลาส javax.servlet.http.ServletResponse
• ถก import เขามาโดยอตโนมตเมอ JSP page ถกแปลงใหอยในรปของ servlet
• จดเตรยมเมธอดทสามารถใชไดใน JSP script เพอ set headers, add cookies, และควบคมวธการทขอมลถกสงกลบไปยง client
56
OUT OBJECT
การแสดงผลสามารถท าไดสองวธ ไดแก
<%= “message” %>
<% out.println(“message”); %>
out เปน implicit object
• เปน instance ของ javax.servlet.jsp.JspWriter
• เมธอดทส าคญสวนใหญจะไดแก print และ println
• หมายเหต: ออปเจค out จะถก close แบบอตโนมตเมอการโปรเซสเพจเสรจสมบรณ
57