前面做了一个ajax的小demo，今天看一个动态更新下拉列表，或者也叫级联更新下拉列表，这个也是利用ajax的异步调用去后台实现数据请求，然后回到前台完成下拉列表数据的更新，以增强web应用的交互性。
后台servlet
package com.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CreateXML
*/
@WebServlet("/CreateXML")
public class CreateXML extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CreateXML() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String selected = request.getParameter("selected");
PrintWriter out = response.getWriter();
out.println("<response>");
//下面分别为两个省份创建地市
if (selected.equals("1")){//如果选择的是“湖南省”
out.println("<city>");
out.println("<cityname>长沙</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>娄底</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>常德</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
}else{//如果选择的是“广东省”
out.println("<city>");
out.println("<cityname>广州</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>深圳</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>佛山</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
}
out.println("</response>");
out.flush();
out.close();
}
}
我们推送到前台的数据为<response><city><cityname>长沙</cityname><cityvalue>1</cityvalue></city></response> xml格式。
前台页面
@H_403_43@<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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>AjaxDemo</title> </head> <script language="javascript"> // 定义一个变量用于存放XMLHttpRequest对象 var xmlHttp; // 该函数用于创建一个XMLHttpRequest对象 function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } // 这是响应省份列表的onChange事件的处理方法 function updateSelect(){ var selected = document.getElementById("slt1").value;//得到省份列表的当前选值 // document.getElementById("slt1").selectedIndex 获得选中项索引值（数字） // document.getElementById("slt1").value 获得选中项的value值 // 创建一个XMLHttpRequest对象 createXMLHttpRequest(); // 将状态触发器绑定到一个函数 xmlHttp.onreadystatechange = processor; // 通过GET方法向指定的URL建立服务器的调用 xmlHttp.open("GET","CreateXML?selected="+selected); // 发送请求 xmlHttp.send(null); } // 处理从服务器返回的XML文档并更新地市下拉列表 function processor() { // 定义一个变量用于存放从服务器返回的响应结果 var result; // 如果响应完成 并且 返回成功 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// // 取出服务器返回的XML文档的所有city标签的子节点 result = xmlHttp.responseXML.getElementsByTagName("city"); // 先清除地市列表的现有内容 while (document.getElementById("slt2").options.length>0){ document.getElementById("slt2").removeChild(document.getElementById("slt2").childNodes[0]); } // 解析XML中的数据并更新地市列表 for(var i=0;i<result.length;i++){ var option = document.createElement("OPTION"); option.text = result[i].getElementsByTagName("cityname")[0].innerHTML;//这就是取出<cityname>中的值 option.value = result[i].getElementsByTagName("cityvalue")[0].innerHTM;//这就是取出<cityvalue>中的值 document.getElementById("slt2").options.add(option);//为地市列表中添加选项 } } } </script> <body> <br><br> <center> <form name="form1" action="#" method="POST"> 请选择省份： <select id="slt1" onChange="updateSelect()"> <option value="1">湖南省</option> <option value="2">广东省</option> </select> 地市： <select id="slt2"> <option value="">请选择地市</option> </select> </form> </center> </body> </html>
这让初始化的省份无法看到自己的地市，不够完美，怎么处理一下呢？
在页面加载完成后，让程序先去后台请求一下当前的省份的地市。页面加载完成，load事件，给body绑定load方法即可。
我们的处理方法为
<body onload="updateSelect()">
这样，页面加载完成时，便可以看到页面上面的广东省的地市。
