初学ajax，实现用户名重复提示、二级/三级联动下拉框

<table>
<tr>
<th>下拉框:</th>
<td>
<select id="provinceId" name="provinceId">
<option>请选择省份</option>
<c:forEach var="list" items="${allProvinces}" varStatus="vs">
<option value="${list.id }">${list.name }</option><!-- 将对应的id传到后台 -->
</c:forEach>
</select>
    
<select id="cityId" name="cityId">
<option>请选择城市</option>
</select>
    
<select id="countyId" name="countyId">
<option>请选择县区</option>
</select>
    
</td>
<td><input type="submit" value="submit"></td>
</tr>
</table>

<script type="text/javascript">

document.getElementById("provinceId").onchange = function(){
//清空城市下拉框中的内容，除第一项
var cityElement = document.getElementById("cityId");
cityElement.options.length = 1;
//清空县下拉框中的内容，除第一项
var countyElement = document.getElementById("countyId");
countyElement.options.length = 1;

//获取选中option标签的索引号，从0开始
var index = this.selectedIndex;
var optionElement = this[index];

var provinceId = optionElement.getAttribute("value");//根据属性获取value的值 ，即id--${list.id }
//alert(provinceId)
provinceId = Number(provinceId);//将string转为number
//alert(typeof provinceId)
/*
//获取选中的option标签中的内容
var province = optionElement.innerHTML;
alert(province)
*/

if( 0 != provinceId){
var ajax = createAJAX();
//alert(ajax!=null)
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityCountyServlet?method=ajaxone&time="+new Date().getTime();
ajax.open(method, url);
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
var content = "provinceId="+provinceId;
ajax.send(content);

ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
var xmlDocument = ajax.responseXML;
var cityElementArray = xmlDocument.getElementsByTagName("city");
var size = cityElementArray.length;
for(var i=0; i<size;i++){

var city = cityElementArray[i].firstChild.nodeValue;

var optionElement = document.createElement("option");	     //创建标签
var cityIdvalue = cityElementArray[i].getAttribute("value"); //cityIdValue是该下来框所对应的id值
optionElement.setAttribute("value", cityIdvalue); 			 //给该标签创建属性

optionElement.innerHTML = city;
cityElement.appendChild(optionElement);
}
}
}
}
}
}
</script>

<script type="text/javascript">
document.getElementById("cityId").onchange = function(){
//清空县的下拉框中的内容，除第一项
var countyElement = document.getElementById("countyId");
countyElement.options.length = 1;

//获取选中option标签的索引号，从0开始
var index = this.selectedIndex;
var optionElement = this[index];

var cityId = optionElement.getAttribute("value");//根据属性获取value的值 ，即id--${list.id }
//alert(cityId)
cityId = Number(cityId);//将string转为number

if( 0 != cityId){
var ajax = createAJAX();
//alert(ajax!=null)
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityCountyServlet?method=ajaxtwo&time="+new Date().getTime();
ajax.open(method, url);
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
var content = "cityId="+cityId;
ajax.send(content);

ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
var xmlDocument = ajax.responseXML;
var countyElementArray = xmlDocument.getElementsByTagName("county");
var size = countyElementArray.length;
for(var i=0; i<size;i++){
var county = countyElementArray[i].firstChild.nodeValue;
var optionElement = document.createElement("option");	//创建标签

var countyIdvalue = countyElementArray[i].getAttribute("value"); //cityIdValue是该下来框所对应的id值
//alert(countyIdvalue)
optionElement.setAttribute("value", countyIdvalue); //给该标签创建属性

optionElement.innerHTML = county;
//alert('hello')
countyElement.appendChild(optionElement);
}
}
}
}
}
}
</script>

@WebServlet("/ProvinceCityCountyServlet")
public class ProvinceCityCountyServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String method = request.getParameter("method");

if(method.equals("ajaxone")){

response.setContentType("text/xml;charset=utf-8");
String provinceId = request.getParameter("provinceId");

CityService cityService = new CityService();
List<City> allCities = cityService.findByFKId(Integer.parseInt(provinceId));

PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");

for(int i=0;i<allCities.size();i++){
City city = allCities.get(i);
pw.write("<city value='"+city.getId()+"'>"+city.getName()+"</city>");
}

pw.write("</root>");
pw.flush();
pw.close();

}else if (method.equals("ajaxtwo")) {
response.setContentType("text/xml;charset=utf-8");
String cityId = request.getParameter("cityId");

CountyService countyService = new CountyService();
List<County> allCounties = countyService.findByFKId(Integer.parseInt(cityId));

PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");

for(int i=0;i<allCounties.size();i++){
County county = allCounties.get(i);
pw.write("<county value='"+county.getId()+"'>"+county.getName()+"</county>");
}

pw.write("</root>");
pw.flush();
pw.close();

}else if (method.equals("fromSubmit")) {	//提交获取数据

String countId = request.getParameter("countyId");

CountyService countyService = new CountyService();
County county = countyService.findById(Integer.parseInt(countId));
System.out.println("县："+county.getName());

CityService cityService = new CityService();
City city = cityService.findById(county.getCity_id());
System.out.println("城市："+city.getName());

ProvinceServince provinceServince = new ProvinceServince();
Province province = provinceServince.findById(city.getProvince_id());
System.out.println("省："+province.getName());

System.out.println(province.getName()+"-"+city.getName()+"-"+county.getName());

}else {
ProvinceServince provinceServince = new ProvinceServince();
List<Province> allProvinces = provinceServince.findAll();

request.setAttribute("allProvinces", allProvinces);
request.getRequestDispatcher("/Province_city_county.jsp").forward(request, response);

}

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}