Ajax实现省市二级联动

这是一个Servlet应用。。

首先是web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<servlet>
		<servlet-name>ProvinceCityServlet</servlet-name>
		<servlet-class>com.jadyer.ajax.ProvinceCityServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>ProvinceCityServlet</servlet-name>
		<url-pattern>/servlet/ProvinceCityServlet</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

然后是显示二级联动效果的index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>

<script type="text/javascript">
	var xmlHTTP = new XMLHttpRequest(); //支持Internet Explorer-8.0.6001.18702

	function getCitys(provinceID){
		//若省份项选中了【==请选择省份==】则清空城市列表数据，并显示【==请选择城市==】
		if('0' == provinceID){
			clearCitys();
			return;
		}
		xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/ProvinceCityServlet?provinceID='+provinceID, true);
		xmlHTTP.onreadystatechange = callback; //设置回调函数
		xmlHTTP.setRequestHeader("if-Modified-Since", "0"); //设置不使用浏览器缓存
		xmlHTTP.send(null); //发送请求
	}

	function callback(){
		if(4==xmlHTTP.readyState && 200==xmlHTTP.status){
			var cityStrings = xmlHTTP.responseText; //得到返回的【绥化,鸡西,哈尔滨,佳木斯】
			var citys = cityStrings.split(","); //拆分得到的城市字符串数组
			
			clearCitys();
			var city = document.getElementById("city");
			
			for(var i=0; i<citys.length; i++){
				var option = document.createElement("option");
				option.text = citys[i];
				option.value = i;
				
				//使用city.appendChild(option);时，在Firefox3.6.13中有效，而IE8.0.6001.18702中则显示空白
				city.options[i+1] = option; //所以就暂时不使用DOM方式，这种同时支持Firefox和IE
			}
		}
	}

	//清空城市列表数据
	function clearCitys(){
		var city = document.getElementById('city');
		city.options.length = 0;
		city.options[0] = new Option('==请选择城市==', '0');
	}
</script>

省份：
<select id="province" onchange="getCitys(this.value)">
<%--这里onchange事件也可以写作onchange="getCitys(this.options[this.selectedIndex].value)"--%>
	<option value="0">==请选择省份==</option>
	<option value="1">黑龙江</option>
	<option value="2">吉林省</option>
	<option value="3">辽宁省</option>
</select>

城市：
<select id="city">
	<option>==请选择城市==</option>
</select>

最后是用来处理Ajax请求操作的ProvinceCityServlet.java

package com.jadyer.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

/**
 * 这里并没有连接数据库，一切数据均由自己构造
 * @see 实际应用中，应从数据库中获取动态数据
 */
@SuppressWarnings("serial")
public class ProvinceCityServlet extends HttpServlet {
	public static Map<String, List<String>> map = new HashMap<String, List<String>>();
	
	@Override
	public void init() throws ServletException {
		List<String> list = new ArrayList<String>();
		list.add("绥化");
		list.add("鸡西");
		list.add("哈尔滨");
		list.add("佳木斯");
		map.put("1", list); //黑龙江
		list = new ArrayList<String>();
		list.add("长春");
		list.add("图门");
		list.add("延吉");
		list.add("四平");
		map.put("2", list); //吉林省
		list = new ArrayList<String>();
		list.add("大连");
		list.add("沈阳");
		list.add("铁岭");
		list.add("本溪");
		map.put("3", list); //辽宁省
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String provinceID = request.getParameter("provinceID");
		List<String> list = map.get(provinceID); //根据省份ID得到其城市的List
		
		StringBuffer sb = new StringBuffer();
		if(null != list){
			for(String s : list){
				sb.append(s).append(",");
			}
			//这里构造的该省份下的城市，所组成的字符串，即类似于【绥化,鸡西,哈尔滨,佳木斯,】
			//注意这里最后会追加一个逗号，所以我们要删除掉最后一个逗号
			if(!list.isEmpty()){
				sb.deleteCharAt(sb.length() - 1);
			}
		}
		
		response.setContentType("text/html; charset=UTF-8"); //设置应答类别
		PrintWriter out = response.getWriter();
		out.print(sb.toString());
		out.close();
	}
}