Example 2: Sending Request Parameters
Ajax isn't really useful unless information is sent to the server as part of the Ajax request. Taconite's AjaxRequest object provides a simple API for adding form values to the query string that is sent to the server.
The XHTML Page
The client XHTML page collects four pieces of data:
- Name
- Gender
- Age Bracket
- Development Tools Used
Clicking the link on the page will send the input data to the server as part of an Ajax request. The server will respond by echoing the input data and adding it to the bottom of the page. The code for the client XHTML page appears below.
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03
04 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
05 <head>
06 <title>Taconite Example</title>
07 <script type="text/javascript" src="/taconite-examples/js/taconite-client.js"></script>
08 <script type="text/javascript" src="/taconite-examples/js/taconite-parser.js"></script>
09
10 <script type="text/javascript">
11 function doEcho(url) {
12 var ajaxRequest = new AjaxRequest(url); //Create AjaxRequest object
13 ajaxRequest.addFormElementsById("name", "age");
14 ajaxRequest.addNamedFormElements("gender", "tools");
15 ajaxRequest.sendRequest(); //Send the request
16 }
17 </script>
18 </head>
19 <body>
20 <form action="#">
21 Your Name: <input type="text" id="name" name="name"/><br/>
22 Gender: <input type="radio" name="gender" value="Male"/>Male
23 <input type="radio" name="gender" value="Female"/>Female<br/>
24 Age:
25 <select id="age" name="age" size="1">
26 <option value="0-20">0-20 years</option>
27 <option value="21-45">21-45 years</option>
28 <option value="45+">45+ years</option>
29 </select>
30 <br/>
31
32 Select the tools you use:
33 <select name="tools" size="3" multiple="multiple">
34 <option value="XHTML">XHTML</option>
35 <option value="Java">Java</option>
36 <option value="CSS">CSS</option>
37 <option value="PHP">PHP</option>
38 <option value=".Net">.Net</option>
39 </select>
40 </form>
41 <br/>
42 <br/>
43 <br/>
44 <a href="javascript:doEcho('example2-all.jsp');">Echo Selections</a>
45
46 <br/><br/>
47 <div id="echoResponse">
48
49 </div>
50 </body>
51 </html>
Other than the form elements there's not a whole lot happening on this page. Unlike Example 1, the form element values are sent to the server as part of the Ajax request. Lines 13 and 14 demonstrate how to add form element values to the query string that is sent to the server. The AjaxRequest object defines two methods, addFormElementsById and addNamedFormElements, that do the work of building a query string. The addFormElementsById method takes any number of strings as parameters, where the parameters represent the id attribute values of the form elements whose value should be added to the query string. All form elements must have an associated name attribute so the query string can be properly created. Similarly, the addFormElementsByName method takes any number of strings as parameters, where the strings represent the name attribute values of the form elements whose values should be added to the query string.
This example uses both methods for demonstration purpose although in most cases you'll probably use one or the other. Note, however, that radio buttons must use the addNamedFormElements method, because a group of radio buttons all have the same name attribute but different value attributes.
For a more complete desription of these methods, be sure to check out the JSDocs for the AjaxRequest object.
Writing the Server Response
Since you've mastered all of the important points of writing the server response from Example 1, you should be able to figure out the appropriate response for this example. Below is example code that creates the Taconite response.
01 <%@page contentType="text/xml"%>
02
03 <%
04 String name = request.getParameter("name");
05 String gender = request.getParameter("gender");
06 String age = request.getParameter("age");
07 String[] toolsArray = request.getParameterValues("tools");
08 String tools = "";
09
10 for(int i = 0; i < toolsArray.length; i++) {
11 tools = tools + " " + toolsArray[i];
12 }
13 %>
14
15 <taconite-root xml:space="preserve">
16
17 <taconite-replace-children contextNodeID="echoResponse">
18
19 <div>
20 Your name is: <%=name%>
21
22 <br/>Your gender is: <%=gender%>
23
24 <br/>Your age bracket is: <%=age%>
25
26 <br/>The tools you use is/are: <%=tools%>
27
28 </div>
29
30 </taconite-replace-children>
31
32 </taconite-root>
The only JSP specific bits in this code list is Line 1, which sets the response's Content-Type to text/xml, and Lines 3-13, which retrieve the parameter values off of the request object. Other than that, this page should be easy to translate to your server-side technology of choice.
The always necessary taconite-root tag appears on Line 15 and its matching closing tag is on Line 32. On Line 17 is the Taconite tag that specifies what we want to do with the new content. Here, the taconite-replace-children tag is used. This tag says, "Replace all of the children of the node represented by the contextNodeID attribute with the content specified here." Example 1 used the taconite-append-as-children tag, which appended the specified content to the context node. In Example 1, clicking a link multiple times added several "Hello World" messages to the page. In this example, clicking a link multiple times will merely update the contents of the context node with the specified content.
Summary
As you can see, Taconite's AjaxRequest object simplies the task of sending parameters to the server. Even though multiple parameters are sent to the server, the doEcho function is still only 6 lines long! Taconite minimizes the amount of JavaScript you need to write.
The server response plucks the parameter values off of the request and echos them back to the page. The taconite-replace-children action is used so that the response only appears once on the page, even if a link is clicked multiple times.