1 / 35

Servlets: Servlet / Web Browser Communication I

Learn about the interaction between web browsers and servlets, reading and extracting form data in interactive web applications.

nallen
Download Presentation

Servlets: Servlet / Web Browser Communication I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related