1、dTree
2、Treeview JavaScript
3、YUI Tree Panel Component with drag and drop and more
4、Ajax drag’n drop folder tree by dhtmlgoodies.com[Example Page]
5、Update a tree with Ajax by dhtmlgoodies.com[Example Page]
6、Static list based folder Tree by dhtmlgoodies.com[Example Page]
7、Folder Tree (with PHP support)[Example Page]
8、Tree Control[Example Page]
9、Expand/Collapse Panes
10、DHTML Tree
11、Nornix Tree Menu
12、Milonic Treemenu[Example Page]
13、jQuery treeView [animated]
14、Tigra Tree Menu
15、dhtmlxTree[Ajax powered with drag and drop function]
16、Yahoo UI Tree Controll
17、Dynamic Drive Simple Tree Menu
18、CheckTree
19、CooljsTree [Example Page]
20、Ajax Tree
21、Super-Simple DHTML Tree
22、Mortens JavaScript Tree Menu
23、TreeView Widget Control for ASP.NET[Thanks Thomas]
]]>
? var XMLHttpReq=false;
? //創(chuàng)建一個XMLHttpRequest對象
? function createXMLHttpRequest(){
? if(window.XMLHttpRequest){ //Mozilla
? XMLHttpReq=new XMLHttpRequest();
? }
? else if(window.ActiveXObject){
? try{
? XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
? }catch(e){
? try{
? XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
? }catch(e){}
? }
? }
? }
?
?
? //發(fā)送請求函數(shù)
? function send(url){
? createXMLHttpRequest();
? XMLHttpReq.open("GET",url,true);
? XMLHttpReq.onreadystatechange=proce;?? //指定響應(yīng)的函數(shù)
? XMLHttpReq.send(null);? //發(fā)送請求
? }
?
? function proce(){
? if(XMLHttpReq.readyState==4){ //對象狀態(tài)
? if(XMLHttpReq.status==200){//信息已成功返回，開始處理信息
? var res=XMLHttpReq.responseXML.getElementsByTagName("root")[0].getElementsByTagName("father")[0].firstChild.data;
? window.alert(res);
? }else{
? window.alert("所請求的頁面有異常");
? }
? }
? }
?
? //身份驗證
? function check(){
? var name=document.getElementById("name").value;
?
? if(name==""){
? alert("請輸入姓名");
? return false;
? }
? else{
? send('/WEB-INF/Xml.xml');
? }
? }
下面的可以取到ＸＭＬ．xml中的數(shù)據(jù)
var res=XMLHttpReq.responseXML.getElementsByTagName("father")[1].getElementsByTagName("children")[0].firstChild.data;
XML.XML
<?xml version="1.0" encoding="UTF-8"?>
<xml-body>
<root>
?? <father>
????? <children>華</children>
????? <girl>jack</girl>
?? </father>
<father>
????? <children>合營</children>
??
?? </father>
</root>
</xml-body>
]]>
項目結(jié)構(gòu)圖：
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> </td></TR>
????????????</TABLE>
????????</form>
????</div>
??</body>
</html>
<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> </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
????}
}
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>
<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>
運(yùn)行結(jié)果圖：
]]>
]]>