In part 5 of this series, we wrote the client-side script to manage the behavior of the Autocomplete
control in the browser. The payoff is in sight, because this week we're going to
finish the remaining Web files, including the all-important
Create the AutocompleteSearch.jsp File
Use the "Shift-Alt-N" shortcut to bring up the "New" popup menu and select the "JSP" item to open the "New JavaServer Page" dialog box (see (See Figure 1).
We'll call this file
AutocompleteSearch. Click the "Finish"
button to create it.
Link External Files
We'll now link three external files to the page. The first is the
AutocompleteList.js file that we created in Part 5 of the series. The
second file is the JSON parser that we downloaded and imported in Part
5 to assist with the processing of the AJAX response. The third is the
file that we created in Part 4.
Add the following three lines to the
<head> section to link the files
AutocompleteSearch.jsp page. Be sure to substitute the name of
your JSON parser if it's not the same one as mine (such as
Next, we'll modify the
The Autocomplete Control Elements
The following code will make up the Autocomplete control (See Figure 2)
It all starts with a form (shown in red outline above) that will be submitted
when the "Lookup Funds" button is clicked. We'll set the
attribute to "autocomplete" to match the name
web.xml file (to be configured later on):
The Difference Between
When we wrote the Java code for the
AutocompleteServlet, we overrode
HttpServlet class's protected
doGet() method. It handles
GET requests. The
HttpServlet class also provides a
doPost() method to handle
POST requests (See Figure 3)
When the user enters text in the Autocomplete field and clicks the "Lookup Funds" button, there are two ways that the form data can be sent to the server:
GET method appends name/value pairs to the URL. This option is best suited
for short requests, because the length of a URL is limited to 256 on most browsers,
although, according to Microsoft, Internet Explorer has a maximum length of
2048 characters. As a result, the URL could be truncated if the form uses a
large number of parameters or if the parameters contain large amounts of data.
Another caveat is that the parameters are visible in the address field of the
browser — not the best place for sensitive data.
POST method, however, packages the name/value pairs inside the
body of the HTTP request, which makes for a cleaner URL and imposes no size
limitations on the forms output. It's also more secure since it takes some
technical knowhow to intercept the request. Web programming languages makes
it simple to retrieve name/value pairs using either method. For instance, in
Java, a parameter can be retrieved using the
getParameter(java.lang.String arg0) function, regardless of the method used.
We're using the GET method because our requests will be quite short and the fields contain no sensitive information.
The Servlet Action
hidden field called "action" will tell the servlet that
we want to look up matching funds by name. This is not to be confused with the form's
action attribute, which sets the page that the form's contents will be
sent to, the
action field will be passed to the
as a name/value pair in the URL to set the servlet
action. A value of
"lookupbyname" tells the servlet to search for matching funds. Here's the code for the form with the