The client-side architecture

331

9.2 The client-side architecture

The client-side architecture is foreign territory to most developers who normally write server-side code. In this case, it is not that scary since we need to take only a few steps to get the options into our second selection list. If you have implemented the JavaScript or server-side solutions for a double combo before, then you have already have experience with part of the processes involved. As you can see in figure 9.4, this application’s client-side interaction does not require many steps. The first step is to build the initial form. The user then selects an item from the form’s first select. This initiates the second step of the clientside architecture, which is to create an XMLHttpRequest object to interact with the server. This transmits the user’s selection to the server, along with the names of the form and the control that will be updated when the server’s response is received. The third part requires us to add the contents of the server’s XML

response to the second select element. JavaScript’s XML DOM methods are used to parse the XML response.

Server

onchange

XMLHttpRequest

XML DOM

Figure 9.4 Client-side architecture, showing the Ajax interaction

Let’s go over the first two steps, which happen before the Ajax request is sent to the server. We’ll explain the third step (the DOM interaction with the server’s XML

response document) in more detail in section 9.4, since we need to talk about the server before we can implement the client-side architecture completely. 9.2.1 Designing the form

The form in this example involves two select elements. The first select element will initially contain values, while the second selection list will be empty. Figure 9.5 shows the form.

Figure 9.5

Available options in the first select element

Licensed to jonathan zheng

332

CHAPTER 9

Dynamic double combo

The first form element can be filled in three separate ways initially, as shown in table 9.1.

Table 9.1 Three ways to populate a form element

Method

Advantages

Disadvantages

Hard-code the values into the select element.

No server-side

Options cannot be

processing.

dynamic.

Fill in the values by using a server-side script.

Options can be dynamic

Requires extra

and pulled from the

processing on the server.

database.

Use Ajax to fill in the values; this method posts

Can be linked to other

Requires extra

back to the server to retrieve the values.

values on the page.

processing on the server.

The first method is to hard-code the values into the select element. This method is good when you have a few options that are not going to change. The second method is to fill in the values by using a server-side script. This approach fills in the options as the page is rendered, which allows them to be pulled from a database or XML file. The third method is to use Ajax to fill in the values; this method posts back to the server to retrieve the values but does not re-render the entire page. In this example, we are hard-coding the values into the selection list since there are only four options and they are not dynamic. The best solution for dynamically loading values into the first selection list is to use a server-side script that fills the list as the page is loaded. Ajax should not be used to populate the first selection list unless its contents depend on other values the user selects on the form. The first selection list needs to have an onchange event handler added to its select element, as shown in listing 9.1. This event handler calls the JavaScript function FillTerritory(), which initiates the process of filling the second selection list by sending a request to the server. Listing 9.1 The double-combo form