ajax的列表联动示例

ajax的列表联动示例

1、 输入域：

请选择省：

<select id="sel1" onchange="return choose(this);">

<option value="">--请选择--</option>

<option value="1">湖南省</option>

<option value="2">湖北省</option>

</select>

&nbsp;&nbsp;

请选择市：

<select id="sel2">

<option value="">--请选择--</option>

</select>

2、 JavaScript脚本：

var xmlHttp;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpReuqest();

}

}

//选择下列列表中的值

function choose(obj) {

var province = obj.value;

createXMLHttpRequest();

xmlHttp.onreadystatechange = process;

xmlHttp.open("GET", "SelProvince?province=" + province);

xmlHttp.send(null);

}

//用来处理状态改变的函数

function process() {

//定义一个变量用于存放从服务器返回的响应结果

var result;

if(xmlHttp.readyState == 4) { //如果响应完成

if(xmlHttp.status == 200) { //如果返回成功

//取出服务器返回的XML中city标签的子结点

result = xmlHttp.responseXML.getElementsByTagName("city");

//先清除地市列表的现有内容

while(document.all.sel2.options.length > 0) {

document.all.sel2.removeChild(document.all.sel2.childNodes[0]);

}

//解析xml文件的数据，并更新到本地列表

for(var i=0; i<result.length; i++) {

var option = document.createElement("OPTION");

option.text = result[i].childNodes[0].childNodes[0].nodeValue;

option.value = result[i].childNodes[1].childNodes[0].nodeValue;

document.all.sel2.options.add(option);

}

}

}

}

3、 Servlet文件：（SelProvince.java文件中的doGet方法）

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

String province = request.getParameter("province");

response.setContentType("text/xml");

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

out.println("<response>");

if("1".equals(province)) {//如果选择的是“湖南省”

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>");

} 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("</response>");

out.flush();

out.close();

}

4、 web.xml文件配置：

<servlet>

<servlet-name>SelProvince</servlet-name>

<servlet-class>com.solid.util.SelProvince</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SelProvince</servlet-name>

<url-pattern>/SelProvince</url-pattern>

</servlet-mapping>