AJAX之二级联动下拉列表

来源：互联网发布：淘宝游戏账号出售编辑：程序博客网时间：2024/05/17 07:27

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

访问页面：

2 0