<script type="text/javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function refreshModelList(){ var modelYear = document.getElementById("modelYear").value; var make = document.getElementById("make").value; if(modelYear == "" || make == ""){ clearModelList(); return; } //创建XMLHttpRequest对象 createXMLHttpRequest(); var url = "<%=request.getContextPath()%>/servlet/RefreshModelListServlet?"+createQueryString(modelYear,make); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("get",url,true); xmlHttp.send(); } function handleStateChange(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ updateModelList(); } } } function updateModelList(){ //首先清除ModelList列表框 clearModelList(); 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 createQueryString(modelYear,make){ return "modelYear="+modelYear+"&make="+make+"&ts="+(new Date().getTime()); } function clearModelList(){ var models = document.getElementById("models"); while(models.length > 0){ models.removeChild(models.childNodes[0]); } } </script> </head> <body> <h1>Select Model Year and Make</h1> <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: 300ps"> <option value="">Models are Expty.</option> </select> </body>
public class RefreshModelListServlet extends HttpServlet { private static List<MakeModelYear> availableModels = new ArrayList<MakeModelYear>(); 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,"Dayona")); 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,"Citation II")); availableModels.add(new MakeModelYear(1985,"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(1970,"Celebrity")); 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,"LeManas")); availableModels.add(new MakeModelYear(1970,"Temppest")); } public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { response.setContentType("text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); int modelYear = Integer.parseInt(request.getParameter("modelYear")); String make = request.getParameter("make"); StringBuffer results = new StringBuffer("<models>"); MakeModelYear availableModel = null; Iterator<MakeModelYear> it = availableModels.iterator(); while(it.hasNext()){ availableModel = it.next(); if(availableModel.getModelYear() == modelYear && availableModel.getMake().equals(make)){ results.append("<model>"); results.append(availableModel.getModel()); results.append("</model>"); } } results.append("</models>"); out.println(results.toString()); out.close(); } public void doPost(HttpServletRequest request,IOException { this.doGet(request,response); } }
原文链接:https://www.f2er.com/ajax/164504.html