Ajax实现二级联动下拉框

这个一个ajax的经典示例，也是ajax的长处所在。不多说了，下面来看代码。

项目结构图：


index.jsp:

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--> <% @pagelanguage = " java " contentType = " text/html;charset=utf-8 " %>

< html >
< head >
< title > MyJSP ' index.jsp ' startingpage </ title >
< metahttp - equiv = " Content-Type " content = " text/html;charset=utf-8 " >
< SCRIPTtype = " text/javascript " >
varreq;
window.onload = function(){
}

functionChange_Select()
{
varzhi = document.getElementById( ' hero ' ).value;
varurl = " 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 );
}
}

functioncallback()
{
if (req.readyState == 4 )
{
if (req.status == 200 )
{
parseMessage();
} else {
alert( " Notabletoretrievedescription " + req.statusText);
}
}
}

functionparseMessage()
{
varxmlDoc = req.responseXML.documentElement;
varxSel = xmlDoc.getElementsByTagName( ' select ' );
varselect_root = document.getElementById( ' skill ' );
select_root.options.length = 0 ;

for (vari = 0 ;i < xSel.length;i ++ )
{
varxValue = xSel[i].childNodes[ 0 ].firstChild.nodeValue;
varxText = xSel[i].childNodes[ 1 ].firstChild.nodeValue;
varoption = new Option(xText,xValue);
try {
select_root.add(option);
} catch (e){
}
}


}
</ SCRIPT >
</ head >

< body >
< divalign = " center " >
< formname = " form1 " method = " post " action = "" >
< TABLEwidth = " 70% " boder = " 0 " cellspacing = " 0 " >
< TR >
< TDalign = " center " > DoubleSelectBox </ TD >
</ TR >
< TR >
< TD >
< SELECTname = " hero " id = " hero " onChange = " Change_Select() " >
< OPTIONvalue = " 0 " > Unbounded </ OPTION >
< OPTIONvalue = " 1 " > D.K. </ OPTION >
< OPTIONvalue = " 2 " > NEC. </ OPTION >
< OPTIONvalue = " 3 " > BOSS </ OPTION >
</ SELECT >
< SELECTname = " skill " id = " skill " >
< OPTIONvalue = " 0 " > Unbounded </ OPTION >
</ SELECT >
</ TD >
</ TR >
< TR >< td >& nbsp; </ td ></ TR >
</ TABLE >
</ form >
</ div >
</ body >
</ html >

SelectServlet.java:

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--> 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{

/**
*Constructoroftheobject.
*/
public SelectServlet(){
super ();
}

/**
*Destructionoftheservlet.<br>
*/
public void destroy(){
super .destroy(); // Justputs"destroy"stringinlog
// Putyourcodehere
}

/**
*ThedoGetmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstoget.
*
* @param requesttherequestsendbytheclienttotheserver
* @param responsetheresponsesendbytheservertotheclient
* @throws ServletExceptionifanerroroccurred
* @throws IOExceptionifanerroroccurred
*/
public void doGet(HttpServletRequestrequest,HttpServletResponseresponse)
throws ServletException,IOException{
response.setContentType( " text/xml " );
response.setHeader( " Cache-Control " , " no-cache " );

StringtargetId = request.getParameter( " id " ).toString();
Stringxml_start = " <selects> " ;
Stringxml_end = " </selects> " ;
Stringxml = "" ;
if (targetId.equalsIgnoreCase( " 0 " )){
xml = " <select><value>0</value><text>Unbounded</text></select> " ;
} else if (targetId.equalsIgnoreCase( " 1 " )){
xml = " <select><value>1</value><text>ManaBurn</text></select> " ;
xml += " <select><value>2</value><text>DeathCoil</text></select> " ;
xml += " <select><value>3</value><text>UnholyAura</text></select> " ;
xml += " <select><value>4</value><text>UnholyFire</text></select> " ;
} else if (targetId.equalsIgnoreCase( " 2 " )){
xml = " <select><value>1</value><text>Corprxplode</text></select> " ;
xml += " <select><value>2</value><text>RaiseDead</text></select> " ;
xml += " <select><value>3</value><text>BrillianceAura</text></select> " ;
xml += " <select><value>4</value><text>AimAura</text></select> " ;
} else {
xml = " <select><value>1</value><text>RainofChaos</text></select> " ;
xml += " <select><value>2</value><text>FingerofDeath</text></select> " ;
xml += " <select><value>3</value><text>Bash</text></select> " ;
xml += " <select><value>4</value><text>SummonDoom</text></select> " ;
}
Stringlast_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
}

/**
*ThedoPostmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost.
*
* @param requesttherequestsendbytheclienttotheserver
* @param responsetheresponsesendbytheservertotheclient
* @throws ServletExceptionifanerroroccurred
* @throws IOExceptionifanerroroccurred
*/
public void doPost(HttpServletRequestrequest,HttpServletResponseresponse)
throws ServletException,IOException{

doGet(request,response);
}

/**
*Initializationoftheservlet.<br>
*
* @throws ServletExceptionifanerroroccure
*/
public void init() throws ServletException{
// Putyourcodehere
}

}

web.xml:

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--> <? xmlversion = " 1.0 " encoding = " UTF-8 " ?>
< web - appversion = " 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 >

运行结果图：