Ajax实现二级联动下拉框(经典AJAX应用)

项目结构图：

index.jsp

 

<% ... @ page language="java" contentType="text/html; charset=utf-8" %>

< html >
   < head >
     < title > My JSP 'index.jsp' starting page </ title >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >
     < SCRIPT  type ="text/javascript" > ...
        var req;
        window.onload=function()...{
        }
        
        function Change_Select()
        ...{
            var zhi=document.getElementById('hero').value;
            var url="select?id="+escape(zhi);
            if(window.XMLHttpRequest)
            ...{
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            ...{
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            if(req)
            ...{
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
        
        function callback()
        ...{
            if(req.readyState == 4)
            ...{
                if(req.status == 200)
                ...{
                    parseMessage();
                }else...{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
        
        function parseMessage()
        ...{
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('skill');
            select_root.options.length=0;
            
            for(var i=0;i<xSel.length;i++)
            ...{
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try...{
                    select_root.add(option);
                }catch(e)...{
                }
            }
            
            
        }
     </ SCRIPT >
   </ head >
  
   < body >
     < div  align ="center" >
         < form  name ="form1"  method ="post"  action ="" >
             < TABLE  width ="70%"  boder ="0"  cellspacing ="0" >
                 < TR >
                     < TD  align ="center" > Double Select Box </ TD >
                 </ TR >
                 < TR >
                     < TD >
                         < SELECT  name ="hero"  id ="hero"  onChange ="Change_Select()" >
                             < OPTION  value ="0" > Unbounded </ OPTION >
                             < OPTION  value ="1" > D.K. </ OPTION >
                             < OPTION  value ="2" > NEC. </ OPTION >
                             < OPTION  value ="3" > BOSS </ OPTION >
                         </ SELECT >
                         < SELECT  name ="skill"  id ="skill" >
                             < OPTION  value ="0" > Unbounded </ OPTION >
                         </ SELECT >
                     </ TD >
                 </ TR >
                 < TR >< td > &nbsp; </ td ></ TR >
             </ TABLE >
         </ form >
     </ div >
   </ body >
</ html >

SelectServlet.java

 

package  com;

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  SelectServlet  extends  HttpServlet  ... {

    /** *//**
     * Constructor of the object.
     */
    public SelectServlet() ...{
        super();
    }

    /** *//**
     * Destruction of the servlet. <br>
     */
    public void destroy() ...{
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /** *//**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException ...{
        response.setContentType("text/xml");
        response.setHeader("Cache-Control","no-cache");
        
        String targetId=request.getParameter("id").toString();
        String xml_start="<selects>";
        String xml_end="</selects>";
        String xml="";
        if(targetId.equalsIgnoreCase("0"))...{
            xml="<select><value>0</value><text>Unbounded</text></select>";
        }else if(targetId.equalsIgnoreCase("1"))...{
            xml="<select><value>1</value><text>Mana Burn</text></select>";
            xml +="<select><value>2</value><text>Death Coil</text></select>";
            xml +="<select><value>3</value><text>Unholy Aura</text></select>";
            xml +="<select><value>4</value><text>Unholy Fire</text></select>";
        }else if(targetId.equalsIgnoreCase("2"))...{
            xml="<select><value>1</value><text>Corprxplode</text></select>";
            xml +="<select><value>2</value><text>Raise Dead</text></select>";
            xml +="<select><value>3</value><text>Brilliance Aura</text></select>";
            xml +="<select><value>4</value><text>Aim Aura</text></select>";
        }else...{
            xml="<select><value>1</value><text>Rain of Chaos</text></select>";
            xml +="<select><value>2</value><text>Finger of Death</text></select>";
            xml +="<select><value>3</value><text>Bash</text></select>";
            xml +="<select><value>4</value><text>Summon Doom</text></select>";
        }
        String last_xml=xml_start+xml+xml_end;
        response.getWriter().write(last_xml);
    }

    /** *//**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException ...{

        doGet(request,response);
    }

    /** *//**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occure
     */
    public void init() throws ServletException ...{
        // Put your code here
    }

}

web.xml

 

<? xml version="1.0" encoding="UTF-8" ?>
< web-app  version ="2.4"  
    xmlns ="http://java.sun.com/xml/ns/j2ee"  
    xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >
   < servlet >
     < servlet-name > SelectServlet </ servlet-name >
     < servlet-class > com.SelectServlet </ servlet-class >
   </ servlet >

   < servlet-mapping >
     < servlet-name > SelectServlet </ servlet-name >
     < url-pattern > /select </ url-pattern >
   </ servlet-mapping >
    
     < welcome-file-list >
         < welcome-file > index.jsp </ welcome-file >
     </ welcome-file-list >
</ web-app >

运行结果图：