ajax级联菜单的实现

DoubleComboXML.java

1. package mypack;
3. import java.io.BufferedWriter;
5. import java.io.File;
7. import java.io.FileWriter;
9. import java.io.IOException;
11. import java.io.PrintWriter;
13. import java.sql.*;
17. import javax.servlet.ServletException;
19. import javax.servlet.http.HttpServlet;
21. import javax.servlet.http.HttpServletRequest;
23. import javax.servlet.http.HttpServletResponse;
27. public class DoubleComboXML extends HttpServlet {
31.     public DoubleComboXML() {
33.         super();
35.         System.out.println("servlet:DoubleComboXML");
37.     }
41.     public void destroy() {
43.         super.destroy(); // Just puts "destroy" string in log
45.         // Put your code here
47.     }
51.     private void process(HttpServletRequest request,
53.             HttpServletResponse response) throws ServletException, IOException {
57.         response.setContentType("text/xml;charset=utf-8");
59.         PrintWriter out = response.getWriter();
63.         String strQuery = request.getParameter("q");
65.         String strForm = request.getParameter("f");
67.         String strElem = request.getParameter("e");
71.         String strSql = "select * from Territories where regionid=" + strQuery;
73.         Connection connection = null;
75.         PreparedStatement pstm = null;
77.         ResultSet rs = null;
79.         try {
81.             Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
83.             connection = DriverManager
85.                     .getConnection(
87.                             "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=ajax",
89.                             "sa", "sa");
91.             pstm = connection
93.                     .prepareStatement("select * from Territories where regionid=" + strQuery);
95.            
97.             rs = pstm.executeQuery();
99.         } catch (ClassNotFoundException e) {
101.             // TODO Auto-generated catch block
103.             e.printStackTrace();
105.         } catch (Exception e) {
107.             // TODO Auto-generated catch block
109.             e.printStackTrace();
111.         }
115.         StringBuffer strXML = new StringBuffer();
117.         strXML.append("<?xml version=/"1.0/" ?>");
119.         strXML.append("<selectChoice>");
121.         strXML.append("<selectElement>");
123.         strXML.append("<formName>" + strForm + "</formName>");
125.         strXML.append("<formElem>" + strElem + "</formElem>");
127.         strXML.append("</selectElement>");
131.         try {
133.             if (!rs.wasNull()) {
137.                 strXML.append("<entry>");
139.                 strXML.append("<optionText>Select A Territory</optionText>");
141.                 strXML.append("<optionValue>-1</optionValue>");
143.                 strXML.append("</entry>");
147.                 while (rs.next()) {
149.                     strXML.append("<entry>");
151.                     strXML.append("<optionText>" + rs.getString("TerritoryDc") + "</optionText>");
153.                     strXML.append("<optionValue>" + rs.getInt("TerritoryID") + "</optionValue>");
155.                     strXML.append("</entry>");
157.                 }
159.             }
161.         } catch (SQLException e) {
163.             // TODO Auto-generated catch block
165.             e.printStackTrace();
167.         }
171.         strXML.append("</selectChoice>");
173.         out.write(strXML.toString());
175.         out.close();
177.     }
181.     public void doGet(HttpServletRequest request, HttpServletResponse response)
183.             throws ServletException, IOException {
187.         process(request, response);
189.     }
193.     public void doPost(HttpServletRequest request, HttpServletResponse response)
195.             throws ServletException, IOException {
199.         process(request, response);
201.     }
205.     public void init() throws ServletException {
207.         // Put your code here
209.     }
213. }

net.js

1. /**//*
3. url-loading object and a request queue built on top of it
5. */
9. /**//* namespacing object */
11. var net=new Object();
15. net.READY_STATE_UNINITIALIZED=0;
17. net.READY_STATE_LOADING=1;
19. net.READY_STATE_LOADED=2;
21. net.READY_STATE_INTERACTIVE=3;
23. net.READY_STATE_COMPLETE=4;
29. /**//*--- content loader object for cross-browser requests ---*/
31. net.ContentLoader=function(url,onload,onerror,method,params,contentType){
33.   this.req=null;
35.   this.οnlοad=onload;
37.   this.οnerrοr=(onerror) ? onerror : this.defaultError;
39.   this.loadXMLDoc(url,method,params,contentType);
41. }
45. net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
47.   if (!method){
49.     method="GET";
51.   }
53.   if (!contentType && method=="POST"){
55.     contentType='application/x-www-form-urlencoded';
57.   }
59.   if (window.XMLHttpRequest){
61.     this.req=new XMLHttpRequest();
63.   } else if (window.ActiveXObject){
65.     this.req=new ActiveXObject("Microsoft.XMLHTTP");
67.   }
69.   if (this.req){
71.     try{
73.       var loader=this;
75.       this.req.onreadystatechange=function(){
77.         net.ContentLoader.onReadyState.call(loader);
79.       }
81.       this.req.open(method,url,true);
83.       if (contentType){
85.         this.req.setRequestHeader('Content-Type', contentType);
87.       }
89.       this.req.send(params);
91.     }catch (err){
93.       this.onerror.call(this);
95.     }
97.   }
99. }
105. net.ContentLoader.onReadyState=function(){
107.   var req=this.req;
109.   var ready=req.readyState;
111.   if (ready==net.READY_STATE_COMPLETE){
113.     var httpStatus=req.status;
115.     if (httpStatus==200 || httpStatus==0){
117.       this.onload.call(this);
119.     }else{
121.       this.onerror.call(this);
123.     }
125.   }
127. }
131. net.ContentLoader.prototype.defaultError=function(){
133.   alert("error fetching data!"
135.     +"/n/nreadyState:"+this.req.readyState
137.     +"/nstatus: "+this.req.status
139.     +"/nheaders: "+this.req.getAllResponseHeaders());
141. }

MyJsp.jsp

 

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
3. <html>
5.   <head>
7.     <title>Double Combo - Ajax In Action</title>
9.     <script type="text/javascript" src="js/net.js"></script>
11.     <script type="text/javascript">         
13.       function FillTerritory(oElem,oTarget){                           
15.         var strValue = oElem.options[                                  
17.                      oElem.selectedIndex].value;                       
19.         var url = 'DoubleComboXML';                               
21.         var strParams = 'q=' + strValue +                              
23.           "f=" + oTarget.form.name +                                   
25.           "e=" + oTarget.name;                                        
27.         var loader1 = new                                              
29.         net.ContentLoader(url,FillDropDown,null,                       
31.                     "POST",strParams);                           
33.       }
35.       function FillDropDown(){
37.         var xmlDoc = this.req.responseXML.documentElement;              
41.         var xSel = xmlDoc.                                             
43.            getElementsByTagName('selectElement')[0];                   
45.         var strFName = xSel.                                           
47.            childNodes[0].firstChild.nodeValue;                         
49.         var strEName = xSel.                                           
51.            childNodes[1].firstChild.nodeValue;                         
53.             
55.         var objDDL = document.forms[strFName].                         
57.            elements[strEName];                                         
59.         objDDL.options.length = 0;                                     
61.             
63.         var xRows = xmlDoc.                                            
65.           getElementsByTagName('entry');                               
67.         for(i=0;i<xRows.length;i++){                                   
69.           var theText = xRows[i].                                      
71.               childNodes[0].firstChild.nodeValue;                      
73.           var theValue = xRows[i].                                     
75.               childNodes[1].firstChild.nodeValue;                      
77.           var option = new Option(theText,                             
79.                             theValue);                           
81.           objDDL.options.add(option,                                   
83.                           objDDL.options.length);                      
85.         }                                                              
87.       }           
89.     </script>
91.   </head>
93.   <body>
95.     <form name="Form1" ID="Form1">
97.       <select name="ddlRegion" onchange="FillTerritory(this,document.Form1.ddlTerritory)" ID="Select1">
99.         <option value="-1">Pick A Region</option>
101.         <option value="1">Eastern</option>
103.         <option value="2">Western</option>
105.         <option value="3">Northern</option>
107.         <option value="4">Southern</option>
109.       </select>
111.       <select name="ddlTerritory" ID="Select2"></select>
113.     </form>
115.   </body>
117. </html>

web.xml

 

1. <?xml version="1.0" encoding="UTF-8"?>
3. <web-app version="2.4" 
5.     xmlns="http://java.sun.com/xml/ns/j2ee" 
7.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
9.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
11.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
13.   <servlet>
15.     <description>This is the description of my J2EE component</description>
17.     <display-name>This is the display name of my J2EE component</display-name>
19.     <servlet-name>DoubleComboXML</servlet-name>
21.     <servlet-class>mypack.DoubleComboXML</servlet-class>
23.   </servlet>
27.   <servlet-mapping>
29.     <servlet-name>DoubleComboXML</servlet-name>
31.     <url-pattern>/DoubleComboXML</url-pattern>
33.   </servlet-mapping>
37. </web-app>