AJAX之二级联动下拉列表
AJAX的核心是JavaScript对象XMLHttpRequest。是一种异步请求的技术，不用刷新整个页面就可以与服务器进行交互。本文就以二级联动下拉列表为例：
获取AJAX对象js代码：
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("浏览器不支持ajax");
}
}
return ajax;
}
JavaScript与jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>二级联动下拉列表</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<select id="provinceID" style="width:111px">
<option>--选择省份--</option>
<option>陕西</option>
<option>广东</option>
</select>
<select id="cityID" style="width:111px">
<option>--选择城市--</option>
</select>
<script type="text/javascript">
document.getElementById("provinceID").onchange = function() {
//清空城市下拉列表，但是除去第一项
var cityElement = document.getElementById("cityID");
cityElement.options.length = 1;
var index = this.selectedIndex;
var optionElement = this[index];
var province = optionElement.innerHTML;
if ("选择省份" != province) {
//【1】获取ajax异步对象
var ajax = createAJAX();
var method = "POST";
var url = "${pageContext.request.contextPath}/ListBoxServlet?time = "+ new Date().getTime();
ajax.open(method, url);
//【2】设置请求头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//【3】
var content = "province=" + province;
ajax.send(content);
//---------------------------------------
//【4】匿名函数
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
//【5】从响应中获取xml文档
var xmlDocument = ajax.responseXML;
//按照DOM规则，解析xml文档
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");
optionElement.innerHTML = city;
cityElement.appendChild(optionElement);
}
}
}
}
}
}
</script>
</body>
</html>
Servlet代码：
package com.xpeng.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ListBoxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String province = request.getParameter("province");
// 通知ajax异步对象，服务器响应的信息载体是xml文件
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");
if ("广东".equals(province)) {
pw.write("<city>广州</city>");
pw.write("<city>深圳</city>");
pw.write("<city>珠海</city>");
} else if ("陕西".equals(province)) {
pw.write("<city>西安</city>");
pw.write("<city>汉中</city>");
pw.write("<city>宝鸡</city>");
pw.write("<city>安康</city>");
}
pw.write("</root>");
pw.flush();
pw.close();
}
}
访问页面：
