1.dynamicLists.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dynamically Filling Lists</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function refreshModelList() { var make = document.getElementById("make").value; var modelYear = document.getElementById("modelYear").value; if(make == "" || modelYear == "") { clearModelsList(); return; } var url = "RefreshModelList?" + createQueryString(make,modelYear) + "&ts=" + new Date().getTime(); createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function createQueryString(make,modelYear) { var queryString = "make=" + make + "&modelYear=" + modelYear; return queryString; } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { updateModelsList(); } } } function updateModelsList() { clearModelsList(); var models = document.getElementById("models"); var results = xmlHttp.responseXML.getElementsByTagName("model"); var option = null; for(var i = 0; i < results.length; i++) { option = document.createElement("option"); option.appendChild(document.createTextNode(results[i].firstChild.nodeValue)); models.appendChild(option); } } function clearModelsList() { var models = document.getElementById("models"); while(models.childNodes.length > 0) { models.removeChild(models.childNodes[0]); } } </script> </head> <body> <h1>Select Model Year and Make</h1> <form action="#"> <span style="font-weight:bold;">Model Year:</span> <select id="modelYear" onchange="refreshModelList();"> <option value="">Select One</option> <option value="2006">2006</option> <option value="1995">1995</option> <option value="1985">1985</option> <option value="1970">1970</option> </select> <br/><br/> <span style="font-weight:bold;">Make:</span> <select id="make" onchange="refreshModelList();"> <option value="">Select One</option> <option value="Chevrolet">Chevrolet</option> <option value="Dodge">Dodge</option> <option value="Pontiac">Pontiac</option> </select> <br/><br/> <span style="font-weight:bold;">Models:</span> <br/> <select id="models" size="6" style="width:300px;"> </select> </form> </body> </html>
2.RefreshModelListServlet.java:
@H_404_21@package com.wch.ajax.servlet; import java.io.*; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import javax.servlet.*; import javax.servlet.http.*; public class RefreshModelListServlet extends HttpServlet { private static List availableModels = new ArrayList(); protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { response.setContentType("text/html;charset=UTF-8"); int modelYear = Integer.parseInt(request.getParameter("modelYear")); String make = request.getParameter("make"); StringBuffer results = new StringBuffer("<models>"); MakeModelYear availableModel = null; for(Iterator it = availableModels.iterator(); it.hasNext();) { availableModel = (MakeModelYear)it.next(); if(availableModel.modelYear == modelYear) { if(availableModel.make.equals(make)) { results.append("<model>"); results.append(availableModel.model); results.append("</model>"); } } } results.append("</models>"); response.setContentType("text/xml"); response.getWriter().write(results.toString()); } protected void doGet(HttpServletRequest request,IOException { processRequest(request,response); } public void init() throws ServletException { availableModels.add(new MakeModelYear(2006,"Dodge","Charger")); availableModels.add(new MakeModelYear(2006,"Magnum")); availableModels.add(new MakeModelYear(2006,"Ram")); availableModels.add(new MakeModelYear(2006,"Viper")); availableModels.add(new MakeModelYear(1995,"Avenger")); availableModels.add(new MakeModelYear(1995,"Intrepid")); availableModels.add(new MakeModelYear(1995,"Neon")); availableModels.add(new MakeModelYear(1995,"Spirit")); availableModels.add(new MakeModelYear(1985,"Aries")); availableModels.add(new MakeModelYear(1985,"Daytona")); availableModels.add(new MakeModelYear(1985,"Diplomat")); availableModels.add(new MakeModelYear(1985,"Omni")); availableModels.add(new MakeModelYear(1970,"Challenger")); availableModels.add(new MakeModelYear(1970,"Charger")); availableModels.add(new MakeModelYear(1970,"Coronet")); availableModels.add(new MakeModelYear(1970,"Dart")); availableModels.add(new MakeModelYear(2006,"Chevrolet","Colorado")); availableModels.add(new MakeModelYear(2006,"Corvette")); availableModels.add(new MakeModelYear(2006,"Equinox")); availableModels.add(new MakeModelYear(2006,"Monte Carlo")); availableModels.add(new MakeModelYear(1995,"Beretta")); availableModels.add(new MakeModelYear(1995,"Camaro")); availableModels.add(new MakeModelYear(1995,"Cavalier")); availableModels.add(new MakeModelYear(1995,"Lumina")); availableModels.add(new MakeModelYear(1985,"Cavalier")); availableModels.add(new MakeModelYear(1985,"Chevette")); availableModels.add(new MakeModelYear(1985,"Celebrity")); availableModels.add(new MakeModelYear(1985,"Citation II")); availableModels.add(new MakeModelYear(1970,"Bel Air")); availableModels.add(new MakeModelYear(1970,"Caprice")); availableModels.add(new MakeModelYear(1970,"Chevelle")); availableModels.add(new MakeModelYear(1970,"Monte Carlo")); availableModels.add(new MakeModelYear(2006,"Pontiac","G6")); availableModels.add(new MakeModelYear(2006,"Grand Prix")); availableModels.add(new MakeModelYear(2006,"Solstice")); availableModels.add(new MakeModelYear(2006,"Vibe")); availableModels.add(new MakeModelYear(1995,"Bonneville")); availableModels.add(new MakeModelYear(1995,"Grand Am")); availableModels.add(new MakeModelYear(1995,"Grand Prix")); availableModels.add(new MakeModelYear(1995,"Firebird")); availableModels.add(new MakeModelYear(1985,"6000")); availableModels.add(new MakeModelYear(1985,"Fiero")); availableModels.add(new MakeModelYear(1985,"Grand Prix")); availableModels.add(new MakeModelYear(1985,"Parisienne")); availableModels.add(new MakeModelYear(1970,"Catalina")); availableModels.add(new MakeModelYear(1970,"GTO")); availableModels.add(new MakeModelYear(1970,"LeMans")); availableModels.add(new MakeModelYear(1970,"Tempest")); } private static class MakeModelYear { private int modelYear; private String make; private String model; public MakeModelYear(int modelYear,String make,String model) { this.modelYear = modelYear; this.make = make; this.model = model; } } }
3.web.xml:
@H_404_21@<servlet> <servlet-name>RefreshModelListServlet</servlet-name> <servlet-class>com.wch.ajax.servlet.RefreshModelListServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>RefreshModelListServlet</servlet-name> <url-pattern>/RefreshModelList</url-pattern> </servlet-mapping>
4.运行结果是: