这次给大家带来ajax怎么实现动态加载组合框（附代码），ajax实现动态加载组合框的注意事项有哪些，下面就是实战案例，一起来看一下。
一 province.jsp
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<html>
<head>
<script type="text/javascript" language="javascript">
var xmlhttp = false; //全局变量，用于记录xmlhttprequest对象
function createxmlhttprequest() {
if(window.activexobject) { //internet explorer时，创建xmlhttprequest对象的方法
try {
xmlhttp = new activexobject(msxml2.xmlhttp);
} catch(e) {
try { xmlhttp = new activexobject(microsoft.xmlhttp);
//旧版本的internet explorer，创建xmlhttprequest对象
} catch(e) {
window.alert(创建xmlhttprequest对象错误+e);
}
}
} else if(window.xmlhttprequest) { //mozilla时，创建xmlhttprequest对象的方法
xmlhttp = new xmlhttprequest();
}
if(!(xmlhttp)) { //未成功创建xmlhttprequest对象
window.alert(创建xmlhttprequest对象异常！);
}
}
//下拉列表项改变时的操作
function prochange(objval) {
createxmlhttprequest(); //创建xmlhttprequest对象
document.getelementbyid(city).length = 1; //根据id获取指定元素，并赋值
xmlhttp.onreadystatechange = citylist; //指定onreadystatechange处理函数
var url=citybyxmlservlet?province=+objval; //请求的url地址
xmlhttp.open(post,url,true);
xmlhttp.send(null);
}
function citylist() { //onreadystatechange的处理函数
if(xmlhttp.readystate==4) {
if(xmlhttp.status==200) {
parsexml(xmlhttp.responsexml); //解析服务器返回的xml数据
}
}
}
//解析xml信息，以添加地市
function parsexml(xmldoc) {
var len = xmldoc.getelementsbytagname(city);
//获取xml数据中所有的“city”元素对象集合
var _citysel = document.getelementbyid(city); //根据id获取页面中的select元素
for(var i=0;i<len.length;i++) { //遍历xml数据并给select元素添加选项
var opt = document.createelement("option"); //创建option对象
opt.text = xmldoc.getelementsbytagname("city")[i].firstchild.data;
//指定新创建元素的text属性值
opt.value = xmldoc.getelementsbytagname("city")[i].firstchild.data;
//指定新创建元素的value属性值
_citysel.add(opt); //为select元素添加option
}
}
</script>
<title>动态加载组合框</title>
</head>
<body>
<table align="center" border=1 width="320">
<tr>
<td>省份：</td>
<td>
<select id="province" onchange="prochange(this.value);" style="width:85">
<option value="gd">广东</option>
<option value="gx">广西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
<option value="ah">安徽</option>
</select>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city" style="width:85">
<option value="">--请选择--</option>
</select>
</td>
</tr>
</table>
</body>
</html>
二、citybyxmlservlet.java
package servlet;
import java.io.ioexception;
import java.io.printwriter;
import java.util.*;
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 citybyxmlservlet
*/
@webservlet(/citybyxmlservlet)
public class citybyxmlservlet extends httpservlet {
private static final long serialversionuid = 1l;
private static final string content_type = text/xml; charset=utf-8;
/**
* @see httpservlet#httpservlet()
*/
public citybyxmlservlet() {
super();
// todo auto-generated constructor stub
}
/**
* @see httpservlet#doget(httpservletrequest request, httpservletresponse response)
*/
public void doget(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
response.setcontenttype(content_type); //设置服务器响应类型
string province =request.getparameter(province);
stringbuffer city = new stringbuffer(<citys>); //记录返回xml串的对象
if(gx.equals(province)){
list list=cityinit(); //获取城市列表
for(int i=0;i<list.size();i++){
city.append("<city>+list.get(i)+</city>);
}
}else if(hn.equals(province)){
list list = cityinit1(); //获取城市列表
for(int j=0;j<list.size();j++){
city.append("<city>+list.get(j)+</city>);
}
}else if(hb.equals(province)){
list list = cityinit2(); //获取城市列表
for(int j=0;j<list.size();j++){
city.append("<city>+list.get(j)+</city>);
}
}
city.append(</citys>);
printwriter out = response.getwriter();
out.println(city.tostring());
out.flush(); //输出流刷新
out.close(); //关闭输出流
}
/*
* 初始化城市
*/
public list<string> cityinit2() {
list<string> citylist = new arraylist<string>();
//添加城市列表
citylist.add(武汉);
citylist.add(襄阳);
citylist.add(黄冈);
citylist.add(荆门);
citylist.add(十堰);
citylist.add(黄石);
return citylist;
}
public list<string> cityinit(){
list<string> citylist = new arraylist<string>();
//添加城市列表
citylist.add(南宁);
citylist.add(桂林);
citylist.add(北海);
citylist.add(河池);
citylist.add(梧州);
citylist.add(玉林);
return citylist;
}
public list<string> cityinit1() {
list<string> citylist = new arraylist<string>();
//添加城市列表
citylist.add(长沙);
citylist.add(湘潭);
citylist.add(岳阳);
citylist.add(常德);
citylist.add(衡阳);
citylist.add(邵阳);
return citylist;
}
/**
*当前servelt的初始化方法. <br>
*
* @throws servletexception发生servletexceptio时抛出
*/
public void init() throws servletexception {
}
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request, response);
}
}
三 web.xml
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemalocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.4">
<servlet>
<servlet-name>citybyxmlservlet</servlet-name>
<servlet-class>servlet.citybyxmlservlet</servlet-class><!--类的位置 -->
</servlet>
<servlet-mapping>
<servlet-name>citybyxmlservlet</servlet-name><!--你创建的类名 -->
<url-pattern>/citybyxmlservlet</url-pattern>
</servlet-mapping>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax文件异步实现表单上传
ajax异步下载文件的实现方法
以上就是ajax怎么实现动态加载组合框（附代码）的详细内容。