AJAX實現web頁面中串聯功能表的設計 __web
來源：互聯網
上載者：User
看了大峽搞的串聯功能表，我也班門弄斧一把，嘿嘿，花了一點時間搞了個串聯功能表貼上來看看。本例中只要你選擇成員分類名稱就會自動顯示成員名稱： 首先在eclipse中建一個項目，名稱你自己做主了，這裡為Easyjf-menu，對應的瀏覽器頁面代碼為： Easyjf-menu.jsp <@page contentType=”text/html;charser=UTF-8” language=”java”%> <head> …….. </head> <script language=”javascript”> var XMLHttpReq; var currentSort; //建立xmlhttprequset對象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq=new XMLHttpRequest(); } else if (window.ActiveXObject){ try{ XMlHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”); }catch(e){} try{ XMLHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”); }catch(e){} } } //發送請求函數 function sendRequest(url){ createXMLHttpRequest(); XMLHttpReq.open(“GET”,url,true); XMLHttpReq.onreadystatechange=processResponse; XMLHttpReq.send(null); } //處理返回資訊函數 function processResponse(){ if(XMLHttpRequest.readyState==4){ if(XMLHttpRequest.status==200){ updateMenu(); }else{alert(“您請求的頁面有異常!”)} } } //更新菜單函數 function updateMenu(){ var res=XMLHttpReq.responseXML.getElementIdByTagName(“res”); var sunMenu=””; for(var i=0;i<res.length;i++){ submenu=subMenu+res[1].fistChild.data+”<br>”; } currentSort.innerHTML=submenu; } //建立串聯功能表 function showSubMenu(obj){ currentSort=document.getElementById(obj); currentSort.parentNode.style.display=””; sendRequest(“menu?sort=”+obj); } </script> <b>EasyJF成員</b> <a onClick=”onShowSubMenu(‘大峽’)”>大峽</a> , 該頁面中提供了對應的菜單以供使用者選擇，使用者選擇菜單後，調用 showSubMenu(‘XXX’) 函數，其中參數用於傳遞使用者所選菜單的標識資訊到伺服器以決定擷取伺服器的哪個在菜單內容，首先獲得菜單的識別資訊，再提交給 Ajax, 這裡用 innerHTML 屬性實現定位顯示。
