October 23, 2016
Hot Topics:

Creating a Double-Combo Linked List with Ajax

  • January 4, 2006
  • By Dave Crane, Eric Pascarello, and Darren James
  • Send Email »
  • More Articles »

Designing the client/server interactions

The FillTerritory() function's main purpose is to gather the information that is needed to send a request to the server. This information includes the selected option from the first list, the name of the form, and the name of the second selection list. With this information we can use the Ajax functions in our JavaScript library to send a request to the server. The first thing we need to do is add our Ajax functionality. The code needed to link to the external JavaScript file, net.js, which defines the ContentLoader object, is trivial. Just add this between the head tags of your HTML document:

<script type="text/javascript" src="net.js"></script>

The ContentLoader object does all of the work of determining how to send a request to the server, hiding any browser-specific code behind an easy-to-use wrapper object. It allows us to send and retrieve the data from the server without refreshing the page.

With the Ajax functionality added, we are able to build the function FillTerritory(), shown in listing 2, which we also add between the head tags of our document.

Listing 2: The function FillTerritory() initializes the Ajax request.

The FillTerritory() function accepts two parameters, passed in this case from the onchange event handler on the first selection list. These are references to the first and second select elements.

The following list references the callouts in listing 2.

  1. We access the value that the user selected in the first list.
  2. We set the URL of our target server-side script.
  3. We then build the parameters to be sent to the server by creating a string that has the same type of syntax as a querystring, using an ampersand to separate each name-value pair. For this example we are sending the value representing the selected region as q, the name of the form as f, and the name of the second select as e. The server-side code will use the selected region value to query the database, and it will send the names of the form and the select element back to the client in its XML response document. The client will use that information to determine which form and control to update. Once the parameter string is built, the only thing left is to initiate the Ajax process.
  4. To start the process, we call the ContentLoader() constructor, and pass in the target URL, the function to be called when the server's response is received, the error-handler function, the HTTP method to use, and the parameters to be sent. In this case, the FillDropDown() function will be called when the data is returned from the server, we will rely on ContentLoader's default error-handler function, and we are using a POST request.

At this point, the ContentLoader will wait for the server to return an XML document. The client-side code continues in section 4, but first, the server has some work to do.

Implementing the server: VB .NET

The server-side code needs to retrieve the territories belonging to the user's selected region from the database, and return them to the client in an XML document. The result set from the SQL query is used to create an XML document that is returned to the client side. Figure 6 shows the flow of the server-side process.

The server-side code is invoked by the request sent from the client-side ContentLoader object. The server-side code first retrieves the value of the request parameter q, representing the selected region. The value of q is used to create a dynamic SQL query statement, which is run against the database to find the text/value pairs for the second drop-down list. The data that is returned by the database query is then formatted as XML and returned to the client. Before we write the code to do this, we need to define the basic XML document structure.

Figure 6: Server-side process flow diagram

Defining the XML response format

We need to create a simple XML document to return the results of our database query to the client. It will contain the options to populate the second selection list. A pair of elements is needed to represent each option, one to contain the option text, and one to contain the option value.

The XML document in our example has a root element named selectChoice, containing a single element named selectElement, followed by one or more entry elements. selectElement contains the names of the HTML form and selection list that the results will populate on the client. Each entry element has two child elements, optionText and optionValue, which hold values representing each territory's description and ID. Listing 3 shows this structure.

Listing 3: Example of the XML response format.

<?xml version="1.0" ?>
      <optionText>Select A Territory</optionText>

Notice in the example XML document in listing 3 that there is an entry containing the option text "Select A Territory". This is the first option shown in the selection list, prompting the user to choose a value. The server-side code includes this value at the start of every response document, before the dynamic options are obtained from the database.

Now that we have our response document defined, we can develop the code that dynamically creates the XML and returns it to the client.

Writing the server-side code

The VB .NET server-side code is straightforward. We perform a query on a database, which returns a record set. We then loop through the record set to create our XML document and send the XML back to the client. If we do not find any records, then we do not create any entry elements, also omitting the static "Select A Territory" option. As you can see in listing 4, the server-side code is not very complicated. It simply contains statements to retrieve the form values posted to the server, set the content type, perform a search, and output the XML document.

This example uses the Northwind sample database from Microsoft's SQL Server.

Listing 4: DoubleComboXML.aspx.vb: Server-side creation of the XML response

Click here for a larger image.

The following list references the callouts in listing 4.

  1. Setting the page's content type to text/xml ensures that the XMLHttpRequest will parse the server response correctly on the client.
  2. We obtain the value of the selected region, the HTML form name, and the element name from the request parameters received from the client. For added safety, we could add a check here to make sure that these values are not null. If the check does not find a value for each, the script could return an error response. We should also add checks for SQL injection before the application enters a production environment. This would ensure that the database is protected from malicious requests sent by attackers.
  3. Having obtained the selected region's value, the next step is to generate a SQL string so we can retrieve the corresponding territories from the database. The two columns we are interested in are TerritoryDescription and TerritoryID, from the database table Territories. We insert the region value into the SQL statement's WHERE clause. To ensure that the results appear in alphabetical order in our selection list, we also set the SQL ORDER BY clause to TerritoryDescription.
  4. Next, we must execute the SQL statement. In this case, we call the function FillDataTable() to create a connection to the database server, perform the query, and return the results in a data table.
  5. Now that we have obtained the result of the SQL query, we need to create the first part of the XML document, which was discussed in listing 2. We begin the document and add the selectElement, containing the values of formName and formElem obtained from the request parameters.
  6. A check is needed to verify if any results were returned by the SQL query.
  7. If there are results, we add the preliminary "Select A Territory" option to the XML.
  8. Next we loop through the results represented in the DataTable, populating the value of the TerritoryDescription column into the optionText tag and the value of the TerritoryID column into the optionValue tag. By nesting each description/ID pair inside an entry tag, we provide an easier means to loop through the values on the client, with JavaScript's XML DOM methods.
  9. After we finish populating our results into the XML document, we need to close the root selectChoice element and write the response to the output page j . The XML response document is returned to the client, and the ContentLoader object is notified that the server-side process is complete. The ContentLoader calls the function FillDropDown() on the client, which will process the XML that we just created.

Let's recap what we've done on the server. We have taken the value from a selected item in a selection list and have run a query against a database without posting back the entire page to the server. We have then generated an XML document and returned it to the client. The next step in the process takes us back to the client side, where we must now convert the XML elements into options for our second selection list.

Page 2 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel