樹狀菜單是做網站時常用的一項技術,它可以像資源管理器那樣清晰的看出網站包含的內容,起著提綱挈領的作用。下面給的這個例子,是jsp結合ajax的例子,這是在網上比較流行的例子。稍作修改供大家參考。例子下載
在這個例子下載之後,看到book..treeview裡面有5個類,需要改的只有DbManager.java第11行的路徑,和第17行的用戶名和密碼。還有將db.sql添加到mysql數據庫中。
查看all.js文件中的腳本代碼。
function postXmlHttp( submitUrl, callbackFunc ,loadFunc)
{
_postXmlHttpProcessPostChangeCallBack = callbackFunc;
_loadingFunction = loadFunc;
if(window.createRequest){
try{
_xmlHttpRequestObj=window.createRequest();
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send();}
catch(ee){}}
else if(window.XMLHttpRequest){
_xmlHttpRequestObj=new XMLHttpRequest();
_xmlHttpRequestObj.overrideMimeType('text/xml');
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
};處理POST請求
function parseSubTree(id)
{var el= document.getElementById( id );//得到id
var ulElmt= document.createElement("UL");//創建<ul>節點
ulElmt.innerHTML=xmlHttpRequestObj.responseText;//用文本的響應方式,賦值給innerHTML
el.appendChild(ulElmt);
var images = el.getElementsByTagName("IMG");
images[0].setAttribute("src", "images/minus.gif");
images[0].setAttribute("onclick", "showHide('"+id+"')");
var aTag = el.getElementsByTagName("A");
aTag[0].setAttribute("onclick", "showHide('"+id+"')");//觸發單擊事件
var loadDiv= document.getElementById( "load" );
loadDiv.style.display="none";//判斷style屬性是否顯示}
這是典型的ajax的方式通過文本響應得到數據,賦值給innerHTML。
其他的代碼前面的原理的部分已經提到過了,不再詳述。