AJax动态加载列表框

xiangtui

浏览: 308401 次
性别:
来自: 成都

最近访客更多访客>>

DeilSky

ken_blok

mingletxt

liangzi_001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

Ajax AIR Servlet HTML JavaScript

功能描述

任意选择两个下拉框，根据选的值作为条件从服务器取得满足条件的值，显示在新的类型下拉框里。

文件一览

dynamicLists.html
RefreshModelListServlet.java

dynamicLists.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 refreshModeList() {
	var make = document.getElementById("make").value;
	var modelYear = document.getElementById("modelYear").value;
	if (make == "" || modelYear == "") {
		clearModelsList();
		return;
	}
	var url = "RefreshModelListServlet?"
		+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) {
			updateModelList();
		}
	}
}
function updateModelList() {
	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="refreshModeList()">
			<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="refreshModeList()">
			<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>

RefreshModelListServlet.java

package ajaxbook.chap4;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RefreshModelListServlet extends HttpServlet {
	
	private static List availableModels = new ArrayList();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		processRequest(req, resp);
	}

	@Override
	public void init() throws ServletException {
		availableModels.add(new MakeModeYear(2006,"Dodge","Charger"));
		availableModels.add(new MakeModeYear(2006,"Dodge","Magnum"));
		availableModels.add(new MakeModeYear(2006,"Dodge","Ram"));
		availableModels.add(new MakeModeYear(2006,"Dodge","Viper"));
		availableModels.add(new MakeModeYear(1995,"Dodge","Avenger"));
		availableModels.add(new MakeModeYear(1995,"Dodge","Intrepid"));
		availableModels.add(new MakeModeYear(1995,"Dodge","Neon"));
		availableModels.add(new MakeModeYear(1995,"Dodge","Spirit"));
		availableModels.add(new MakeModeYear(1985,"Dodge","Aries"));
		availableModels.add(new MakeModeYear(1985,"Dodge","Daytona"));
		availableModels.add(new MakeModeYear(1985,"Dodge","Omni"));
		availableModels.add(new MakeModeYear(1970,"Dodge","Challenger"));
		availableModels.add(new MakeModeYear(1970,"Dodge","Charger"));
		availableModels.add(new MakeModeYear(1970,"Dodge","Coronet"));
		availableModels.add(new MakeModeYear(1970,"Dodge","Dart"));
		availableModels.add(new MakeModeYear(2006,"Chevrolet","Colorado"));
		availableModels.add(new MakeModeYear(2006,"Chevrolet","Corvette"));
		availableModels.add(new MakeModeYear(2006,"Chevrolet","Equinox"));
		availableModels.add(new MakeModeYear(2006,"Chevrolet","Monte Carlo"));
		availableModels.add(new MakeModeYear(1995,"Chevrolet","Beretta"));
		availableModels.add(new MakeModeYear(1995,"Chevrolet","Camaro"));
		availableModels.add(new MakeModeYear(1995,"Chevrolet","Cavalier"));
		availableModels.add(new MakeModeYear(1995,"Chevrolet","Lumina"));
		availableModels.add(new MakeModeYear(1985,"Chevrolet","Chevette"));
		availableModels.add(new MakeModeYear(1985,"Chevrolet","Celebrity"));
		availableModels.add(new MakeModeYear(1985,"Chevrolet","Citation"));
		availableModels.add(new MakeModeYear(1985,"Chevrolet","Charger"));
		availableModels.add(new MakeModeYear(1970,"Chevrolet","Bel Air"));
		availableModels.add(new MakeModeYear(1970,"Chevrolet","Caprice"));
		availableModels.add(new MakeModeYear(1970,"Chevrolet","Chevelle"));
		availableModels.add(new MakeModeYear(1970,"Chevrolet","Monte Carlo"));
		
		availableModels.add(new MakeModeYear(2006,"Pontiac","G6"));
		availableModels.add(new MakeModeYear(2006,"Pontiac","Grand Prix"));
		availableModels.add(new MakeModeYear(2006,"Pontiac","Solstice"));
		availableModels.add(new MakeModeYear(2006,"Pontiac","Vibe"));
		availableModels.add(new MakeModeYear(1995,"Pontiac","Bonneville"));
		availableModels.add(new MakeModeYear(1995,"Pontiac","Grand am"));
		availableModels.add(new MakeModeYear(1995,"Pontiac","Grand Prix"));
		availableModels.add(new MakeModeYear(1995,"Pontiac","Firebird"));
		availableModels.add(new MakeModeYear(1985,"Pontiac","6000"));
		availableModels.add(new MakeModeYear(1985,"Pontiac","Fiero"));
		availableModels.add(new MakeModeYear(1985,"Pontiac","Grand Prix"));
		availableModels.add(new MakeModeYear(1985,"Pontiac","Parisienne"));
		availableModels.add(new MakeModeYear(1970,"Pontiac","Catalina"));
		availableModels.add(new MakeModeYear(1970,"Pontiac","GTO"));
		availableModels.add(new MakeModeYear(1970,"Pontiac","LEMans"));
		availableModels.add(new MakeModeYear(1970,"Pontiac","Tempest"));
	}
	
	protected void processRequest(HttpServletRequest req, HttpServletResponse resp) 
		throws ServletException,IOException {
		resp.setContentType("test/html;charset=UTF-8");
		int modelYear = Integer.parseInt(req.getParameter("modelYear"));
		String make = req.getParameter("make");
		
		StringBuffer results = new StringBuffer("<models>");
		MakeModeYear availableModel = null;
		for (Iterator it = availableModels.iterator();it.hasNext();) {
			availableModel = (MakeModeYear)it.next();
			if (availableModel.modelYear == modelYear) {
				if (availableModel.make.equals(make)) {
					results.append("<model>");
					results.append(availableModel.model);
					results.append("</model>");
				}
			}
		}
		results.append("</models>");
		//设置返回文件的类型
		resp.setContentType("text/xml");
		//向页面输出东西
		resp.getWriter().write(results.toString());
	}
	private static class MakeModeYear {
		private int modelYear;
		private String make;
		private String model;
		public MakeModeYear(int modelYear, String make, String model) {
			this.modelYear = modelYear;
			this.make = make;
			this.model = model;
		}
		
	}
}

效果如下图