Servlets: Servlet / Web Browser Communication I - PowerPoint PPT Presentation

servlets servlet web browser communication i n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Servlets: Servlet / Web Browser Communication I PowerPoint Presentation
Download Presentation
Servlets: Servlet / Web Browser Communication I

Loading in 2 Seconds...

play fullscreen
1 / 35
Servlets: Servlet / Web Browser Communication I
0 Views
Download Presentation
nallen
Download Presentation

Servlets: Servlet / Web Browser Communication I

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Servlets:Servlet / Web Browser Communication I Ethan Cerami New York University Servlet / Web Browser Communication I

  2. Road Map • Overview of Browser/Servlet Communication • Reading Form Data from Servlets • Example 1: Reading three parameters • Example 2: Reading all parameters • Case Study: Resume Posting Service Servlet / Web Browser Communication I

  3. Overview of Browser/Servlet Communication Servlet / Web Browser Communication I

  4. Overview • This lecture is the first in two lectures that discuss the interaction between web browsers and servlets. Request Web Browser Web Server Response Servlet / Web Browser Communication I

  5. Client Request Data • When a user submits a browser request to a web server, it sends two categories of data: • Form Data: Data that the user explicitly typed into an HTML form. • For example: registration information. • HTTP Request Header Data: Data that is automatically appended to the HTTP Request from the client. • For example: cookies, browser type, browser IP address. • This lecture examines Form Data; the next lecture examines HTTP Data. Servlet / Web Browser Communication I

  6. Form Data Servlet / Web Browser Communication I

  7. Form Data • Based on our understanding of HTML, we now know how to create user forms. • We also know how to gather user data via all the form controls: text, password, select, checkbox, radio buttons, etc. • Now, the question is: if I submit form data to a servlet, how do I extract this form data? • Figuring this out forms the basis of creating interactive web applications that respond to user requests. Servlet / Web Browser Communication I

  8. Reading Form Data from Servlets • The HttpServletRequest object contains three main methods for extracting form data: • getParameter(): used to retrieve a single form parameter. • getParameterValues(): used to retrieve a list of form values, e.g. a list of selected checkboxes. • getParameterNames(): used to retrieve a full list of all parameter names submitted by the user. • We will examine each of these and then explore several examples. Servlet / Web Browser Communication I

  9. Reading Form Data • All these methods work the same way regardless of whether the browser uses HTTP GET or HTTP POST. • Remember that form elements are case sensitive. Therefore, “userName” is not the same as “username.” Servlet / Web Browser Communication I

  10. getParameter() Method • Used to retrieve a single form parameter. • Possible return values: • String: corresponds to the form parameter. • Empty String: parameter exists, but has no value. • null: parameter does not exist. Servlet / Web Browser Communication I

  11. getParameterValues() Method • Used to retrieve multiple form parameters with the same name. • For example, a series of checkboxes all have the same name, and you want to determine which ones have been selected. • Returns an Array of Strings. • An array with a single empty string indicates that the form parameter exists, but has no values. • null: indicates that the parameter does not exist. Servlet / Web Browser Communication I

  12. getParameterNames() method • Returns an Enumeration object. • By cycling through the enumeration object, you can obtain the names of all parameters submitted to the servlet. • Note that the Servlet API does not specify the order in which parameter names appear. Servlet / Web Browser Communication I

  13. Example 1: Reading three explicit parameters Servlet / Web Browser Communication I

  14. Example 1 • Our first example consists of one HTML page, and one servlet. • The HTML page contains three form parameters: param1, param2, and param3. • The Servlet extracts these specific parameters and echoes them back to the browser. • Before we examine the code, let’s try it out: http://ecerami.com/applied_fall_2000/examples/servlets/ThreeParamsForm.html Servlet / Web Browser Communication I

  15. <HTML> <HEAD> <TITLE>Collecting Three Parameters</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <H1 ALIGN="CENTER">Collecting Three Parameters</H1> <FORM ACTION="/servlet/coreservlets.ThreeParams"> First Parameter: <INPUT TYPE="TEXT" NAME="param1"><BR> Second Parameter: <INPUT TYPE="TEXT" NAME="param2"><BR> Third Parameter: <INPUT TYPE="TEXT" NAME="param3"><BR> <CENTER> <INPUT TYPE="SUBMIT"> </CENTER> </FORM> </BODY> </HTML> Servlet / Web Browser Communication I

  16. package coreservlets; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; /** Simple servlet that reads three parameters from the * form data. */ public class ThreeParams extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String title = "Reading Three Request Parameters"; Continued…. Servlet / Web Browser Communication I

  17. out.println(ServletUtilities.headWithTitle(title) + "<BODY BGCOLOR=\"#FDF5E6\">\n" + "<H1 ALIGN=CENTER>" + title + "</H1>\n" + "<UL>\n" + " <LI><B>param1</B>: " + request.getParameter("param1") + "\n" + " <LI><B>param2</B>: " + request.getParameter("param2") + "\n" + " <LI><B>param3</B>: " + request.getParameter("param3") + "\n" + "</UL>\n" + "</BODY></HTML>"); } } Servlet / Web Browser Communication I

  18. Example 2: Reading all Parameters Servlet / Web Browser Communication I

  19. Example 2 • Example 1 will only read explicit parameters. • Now, let’s look at a Servlet that echoes back all the form parameters you send it. • You will probably remember this servlet from our discussions of HTML forms. Servlet / Web Browser Communication I

  20. Example 2 • The Example works by first calling getParameterNames(). • By cycling through the returned Enumeration, the servlet can access all form names. • For each form name, we call getParameterValues() to extract the form values. • By cycling through the returned array of strings, we then print out all the associated values. Servlet / Web Browser Communication I

  21. package coreservlets; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import java.util.*; public class ShowParameters extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String title = "Reading All Request Parameters"; out.println(ServletUtilities.headWithTitle(title) + "<BODY BGCOLOR=\"#FDF5E6\">\n" + "<H1 ALIGN=CENTER>" + title + "</H1>\n" + "<TABLE BORDER=1 ALIGN=CENTER>\n" + "<TR BGCOLOR=\"#FFAD00\">\n" + "<TH>Parameter Name<TH>Parameter Value(s)"); Output a simple HTML table for displaying the form parameters. Continued….

  22. Enumeration paramNames = request.getParameterNames(); while(paramNames.hasMoreElements()) { String paramName = (String)paramNames.nextElement(); out.print("<TR><TD>" + paramName + "\n<TD>"); String[] paramValues = request.getParameterValues(paramName); if (paramValues.length == 1) { String paramValue = paramValues[0]; if (paramValue.length() == 0) out.println("<I>No Value</I>"); else out.println(paramValue); } else { out.println("<UL>"); for(int i=0; i<paramValues.length; i++) { out.println("<LI>" + paramValues[i]); } out.println("</UL>"); } } • First, use getParameterNames() to retrieve an Enumeration of all form parameters. • Then, iterate through each element within the Enumeration. Continued….

  23. out.println("</TABLE>\n</BODY></HTML>"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } doPost calls doGet(). Therefore the servlet will work just as well for HTTP POSTs or GETs. Servlet / Web Browser Communication I

  24. Case Study: Resume Posting Service Servlet / Web Browser Communication I

  25. Resume Posting Service • Our next servlet receives a series of parameters: • Name, title, email address, programming languages. • Font, font size, etc. • Based on these parameters, the user is able to post his/her resume online. • Let’s first try it out… Servlet / Web Browser Communication I

  26. Cascading Style Sheets • The Resume servlet utilizes Cascading Style Sheets (CSS). • We never covered CSS when covering HTML. But, we will cover the very basics right now. • Let’s begin with a brief description of CSS. Servlet / Web Browser Communication I

  27. CSS Defined • CSS: a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. • Two Step process for using CSS: • Step 1: Create your “styles” • Step 2: Apply your styles to your HTML document. • Let’s look at an example… Servlet / Web Browser Communication I

  28. <HTML> <BODY> <STYLE TYPE="text/css"> <!-- .HEADING1 { color: blue; font-size: 64px; } .HEADING2 { color: gray; font-size: 22px; } --> </STYLE> <SPAN CLASS="HEADING1">Resume Posting Service</SPAN> <P> <SPAN CLASS="HEADING2">Provided by hotcomputerjobs.com</SPAN> </BODY> </HTML> First, you create your styles Within a <STYLE> tag. Then, you apply your styles By using the SPAN tag.

  29. Defining Styles • Each Style has a name, and a set of properties. • For example, the heading1 tag is set to blue, 64 pixels big: .HEADING1 { color: blue; font-size: 64px; } • Lots of properties exist: color, font-size, text-align, font-family, etc. Servlet / Web Browser Communication I

  30. Applying Styles • Once you have created your styles, you apply a style to your text via the SPAN tag. • For example, to apply the heading1 style: <SPAN CLASS="HEADING1">Resume Posting Service</SPAN> Servlet / Web Browser Communication I

  31. Stylo-Matic • Unfortunately, different browsers interpret CSS slightly differently. • And, it therefore turns out to be problematic when developing cross-browser web pages. • Let’s try a great little tool that exhibits some of the power of CSS: Stylo-Matic: http://www.builder.com/Authoring/CSS/ss12.html Servlet / Web Browser Communication I

  32. SubmitResume.java • Three major sections to SubmitResume.java • Retrieve all the form parameters. • Make the style sheet • Output the HTML for the resume. • We will examine each piece. For the full code, see today’s handout. Servlet / Web Browser Communication I

  33. 1.Retrieving Form Parameters • First, the showPreview() method retrieves the form parameters. • If a parameter is missing, we supply a default: String fgColor = request.getParameter("fgColor"); fgColor = replaceIfMissing(fgColor, "BLACK"); String bgColor = request.getParameter("bgColor"); bgColor = replaceIfMissing(bgColor, "WHITE"); Servlet / Web Browser Communication I

  34. 2. Make the Style Sheet • Based on the form parameters, we create an appropriate stylesheet via the makeStyleSheet() method: String styleSheet = "<STYLE TYPE=\"text/css\">\n" + "<!--\n" + ".HEADING1 { font-size: " + heading1Size + "px;\n" + " font-weight: bold;\n" + " font-family: " + headingFont + "Arial, Helvetica, sans-serif;\n" + "}\n" + …. Servlet / Web Browser Communication I

  35. 3. Output the HTML • The showPreview() method outputs SPAN tags plus resume data: … "<CENTER>\n"+ "<SPAN CLASS=\"HEADING1\">" + name + "</SPAN><BR>\n" + "<SPAN CLASS=\"HEADING2\">" + title + "<BR>\n" + "<A HREF=\"mailto:" + email + "\">" + email + "</A></SPAN>\n" + "</CENTER><BR><BR>\n" + … Servlet / Web Browser Communication I