Ajax案例(1)
1.简单的级联下拉框
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>SelectCityServlet</servlet-name> <servlet-class>com.demo.servlet.SelectCityServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SelectCityServlet</servlet-name> <url-pattern>/servlet/SelectCityServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>
package com.demo.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 SelectCityServlet extends HttpServlet { public SelectCityServlet(){super();} public void destory(){super.destroy();}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");response.setCharacterEncoding("UTF-8");String state=request.getParameter("state");StringBuffer buffer=new StringBuffer("<state>");if("hn".equals(state)){buffer.append("<city>郑州</city><city>洛阳</city>");}else if("hb".equals(state)){buffer.append("<city>武汉</city><city>荆州</city><city>黄冈</city>");}buffer.append("</state>");PrintWriter out=response.getWriter();out.write(buffer.toString());out.close();} }<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <script type="text/javascript"> function getResult(stateVal) { var url = "servlet/SelectCityServlet?state="+stateVal; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); }else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url, true); req.onreadystatechange = complete; req.send(null); } } function complete(){ if (req.readyState == 4) { if (req.status == 200) { var city = req.responseXML.getElementsByTagName("city"); file://alert(city.length); var str=new Array(); for(var i=0;i<city.length;i++){ str[i]=city[i].firstChild.data; } file://alert(document.getElementById("city")); buildSelect(str,document.getElementById("city")); } } } function buildSelect(str,sel) { sel.options.length=0; for(var i=0;i<str.length;i++) { sel.options[sel.options.length]=new Option(str[i],str[i]) } } </script></head> <body> <select name="state" onChange="getResult(this.value)"> <option value="">Select</option> <option value="hn">河南</option> <option value="hb">湖北</option> </select> <select id="city"> <option value="">CITY</option> </select></body></html>