Ajax Basics Tutorial (4)-Implementing basic AJAX Technology 4.3 dynamic load list box

Web applications are typically built using the wizard tools design principle, where each screen requires a user to enter a small amount of information, and each subsequent page's data is created based on the previous page's input. In some cases, this design pattern is useful, such as the user completing the task in a step-by-step, orderly manner. Unfortunately, too many Web applications use this approach because they have no choice. Before the advent of Ajax technology, it would be difficult, if not impossible, to dynamically update the page without refreshing the entire page when modifying parts of the page based on user input.

One technique to avoid full page refreshes is to hide the data on the page and display them as needed. For example, suppose that the value of the selection box B is to be filled in according to the value selected in box A, at which point selecting all of the desirable values for box B can be placed in a hidden selection box. When the selected value in box A changes, JavaScript can determine which hidden selection box to display, then make the selection box visible, and then hide the previous selection box. This technique can also be changed by dynamically filling in the option element in selection box B with the elements in the Hidden list box. These techniques are useful, but they are available only in limited circumstances, that is, the page is limited to modifying a limited selection based on user input, and the selection must be relatively small.

Let's say you're building an online classified advertising service for cars. Someone wants to buy a car, specify the year, brand and model, to search for the car he wants to buy. To avoid user input errors and reduce the number of dynamic validations required, you decide the year, brand and model input fields should be the selection box, and consider the past 25 years of vehicle advertising. If the selection in the Year selection box or brand selection box changes, you must modify the list of available models for the year and brand of the vehicle.

Keep in mind that for each model year, there will be some new brands, and some old brands may fade out of sight, so the number will change. Keep in mind that for each brand, the models may be different each year. If there are dozens of kinds of brands, each type of year each brand has a variety of models, then the model year, brand and the combination of models will be amazing. With so many combinations, it is not possible to use only JavaScript to fill out the selection box.

Using AJAX technology can be a very easy way to solve this problem. Year of model or brand selection in the selection box each time a change occurs, an asynchronous request is made to the server asking for a list of cars of the particular brand for the year. The server is responsible for determining the vehicle list according to the brand and year of the model requested by the browser. The server is likely to adopt a high-speed data lookup component (possibly implemented as a relational database) to complete the task of finding available models. Once the available models are found, the server packs them in an XML file and returns them to the browser.

The browser is responsible for parsing the XML response of the server and filling in the model selection box with the available models for the specified brand and model year. In this example, it is important to note that the data view is well separated from the original data. The browser is responsible for rendering only the data view, and the server is responsible for mining the raw data that must be rendered on the browser view.

Code Listing 4-5 shows how to use AJAX technology to dynamically create the contents of a selection box based on the value of the other two list boxes. The use case for this example is the classified advertising service described above, and the selected values in the Year selection box and brand selection box in this model determine the contents of the Vehicle selection box. This example uses only 4 vehicle years, 3 brands, and 4 available models for a particular brand year. Even so, the number of years, brands and models combined has reached 48. It is not feasible to hide the corresponding vehicle list and display the appropriate list according to the selected brand and model year values, if the hidden approach is to match the year and brand components of each model.