前台
<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);
}
}
