AJAX之二级联动下拉列表

AJAX的核心是JavaScript对象XMLHttpRequest。是一种异步请求的技术，不用刷新整个页面就可以与服务器进行交互。本文就以二级联动下拉列表为例：

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,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();
	}

}

访问页面：

AJAX之二级联动下拉列表

猜你在找的Ajax相关文章