<?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> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>DoubleComboXML</servlet-name> <servlet-class>mypack.DoubleComboXML</servlet-class> </servlet> <servlet-mapping> <servlet-name>DoubleComboXML</servlet-name> <url-pattern>/DoubleComboXML</url-pattern> </servlet-mapping> </web-app>
MyJsp.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Double Combo - Ajax In Action</title> <script type="text/javascript" src="js/net.js"></script> <script type="text/javascript"> function FillTerritory(oElem,oTarget){ var strValue = oElem.options[ oElem.selectedIndex].value; var url = 'DoubleComboXML'; var strParams = 'q=' + strValue + "&f="+ oTarget.form.name + "&e="+ oTarget.name; var loader1 =new net.ContentLoader(url,FillDropDown,null, "POST",strParams); } function FillDropDown(){ var xmlDoc =this.req.responseXML.documentElement; var xSel = xmlDoc. getElementsByTagName('selectElement')[0]; var strFName = xSel. childNodes[0].firstChild.nodeValue; var strEName = xSel. childNodes[1].firstChild.nodeValue; var objDDL = document.forms[strFName]. elements[strEName]; objDDL.options.length =0; var xRows = xmlDoc. getElementsByTagName('entry'); for(i=0;i<xRows.length;i++){ var theText = xRows[i]. childNodes[0].firstChild.nodeValue; var theValue = xRows[i]. childNodes[1].firstChild.nodeValue; var option =new Option(theText, theValue); objDDL.options.add(option, objDDL.options.length); } } </script> </head> <body> <form name="Form1" ID="Form1"> <select name="ddlRegion" onchange="FillTerritory(this,document.Form1.ddlTerritory)" ID="Select1"> <option value="-1">Pick A Region</option> <option value="1">Eastern</option> <option value="2">Western</option> <option value="3">Northern</option> <option value="4">Southern</option> </select> <select name="ddlTerritory" ID="Select2"></select> </form> </body> </html>
net.js
/* url-loading object and a request queue built on top of it */ /* namespacing object */ var net=new Object(); net.READY_STATE_UNINITIALIZED=0; net.READY_STATE_LOADING=1; net.READY_STATE_LOADED=2; net.READY_STATE_INTERACTIVE=3; net.READY_STATE_COMPLETE=4; /*--- content loader object for cross-browser requests ---*/ net.ContentLoader=function(url,onload,onerror,method,params,contentType){ this.req=null; this.onload=onload; this.onerror=(onerror) ? onerror : this.defaultError; this.loadXMLDoc(url,method,params,contentType); } net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){ if (!method){ method="GET"; } if (!contentType && method=="POST"){ contentType='application/x-www-form-urlencoded'; } if (window.XMLHttpRequest){ this.req=new XMLHttpRequest(); }elseif (window.ActiveXObject){ this.req=new ActiveXObject("Microsoft.XMLHTTP"); } if (this.req){ try{ var loader=this; this.req.onreadystatechange=function(){ net.ContentLoader.onReadyState.call(loader); } this.req.open(method,url,true); if (contentType){ this.req.setRequestHeader('Content-Type', contentType); } this.req.send(params); }catch (err){ this.onerror.call(this); } } } net.ContentLoader.onReadyState=function(){ var req=this.req; var ready=req.readyState; if (ready==net.READY_STATE_COMPLETE){ var httpStatus=req.status; if (httpStatus==200|| httpStatus==0){ this.onload.call(this); }else{ this.onerror.call(this); } } } net.ContentLoader.prototype.defaultError=function(){ alert("error fetching data!" +"/n/nreadyState:"+this.req.readyState +"/nstatus: "+this.req.status +"/nheaders: "+this.req.getAllResponseHeaders()); }