《2023年基于ajax的二级动态菜单.doc》由会员分享，可在线阅读，更多相关《2023年基于ajax的二级动态菜单.doc（21页珍藏版）》请在金锄头文库上搜索。
1、这些时间，瞎子也看得见，AJAX正大踏步朝咱们走来。不管咱们是拥护也好，反对也罢，还是视而不见，AJAX像一阵时尚，席转了咱们所有人。有关AJAX定义也好，大话也好，早有人在网上刊登了汗牛充栋文字，在这里我也不想照本宣科。只想说说我感觉到某些长处，对于不对，人们也可以和我讨论：首先是异步交互，顾客感觉不到页面提交，当然也不等待页面返回。这是使用了AJAX技术页面给顾客第一感觉。另首先是响应速度快，这也是顾客强烈体验。然后是与咱们开发者有关，复杂UI成功处理，一直以来，咱们对B/S模式UI不如C/S模式UI丰富而苦恼。目前由于AJAX大量使用JS，使得复杂UI设计变得愈加成功。最终，AJAX祈求
2、返回对象为XML文献，这也是一种时尚，就是WEB SERVICE时尚同样。易于和WEB SERVICE结合起来。好了，闲话少说，让咱们转入正题吧。咱们第一种例子是基于Servlet为后台一种web应用。基于ServletAJAX 这是一种很常用UI，当顾客在第一种选用框里选用ZHEJIANG时，第二个选用框要出现ZHEJIANG都市；当顾客在第一种选用框里选用JIANGSU时，第二个选用框里要出现JIANGSU都市。首先，咱们来看配置文献web.xml，在里面配置一种servlet，跟往常同样： SelectCityServlet com.stephen.servlet.SelectCityS
3、ervlet SelectCityServlet /servlet/SelectCityServlet 然后，来看咱们JSP文献：MyHtml.html!-function getResult(stateVal) var url = servlet/SelectCityServlet?state=+stateVal； if (window.XML Request) req = new XML Request()； else if (window.ActiveXObject) req = new ActiveXObject(Microsoft.XML )； if(req) req.open(GE
4、T,url，true)； req.onreadystatechange = complete； req.send(null)； function complete() if (req.readyState = 4) if (req.status = 200) var city = req.responseXML.getElementsByTagName(city)； file:/alert(city.length); var str=new Array(); for(var i=0;icity.length;i+) stri=cityi.firstChild.data; file:/alert
5、(document.getElementById(city); buildSelect(str,document.getElementById(city); function buildSelect(str,sel) sel.options.length=0; for(var i=0;istr.length;i+) sel.optionssel.options.length=new Option(stri,stri) Select ZEHJIANG JIANGSU CITY第一眼看来，跟咱们寻常JSP没有两样。仔细一看，不一样在JS里头。咱们首先来看第一种措施：getResult(stateV
6、al)，在这个措施里，首先是获得Xml Request；然后设置该祈求url：req.open(GET,url，true);接着设置祈求返回值接受措施：req.onreadystatechange = complete;该返回值接受措施为complete();最终是发送祈求：req.send(null);然后咱们来看咱们返回值接受措施：complete()，这这个措施里，首先判断与否对旳返回，假如对旳返回，用DOM对返回XML文献进行解析。有关DOM使用，这里不再讲述，请人们参阅有关文档。得到city值后来，再通过buildSelect(str,sel)措施赋值到对应选用框里头去。 最终咱们来
7、看看Servlet文献：import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet. . Servlet;import javax.servlet. . ServletRequest;import javax.servlet. . ServletResponse;/* author Administrator* TODO To change the template for this generated type comment
8、go to* Window - Preferences - Java - Code Style - Code Templates*/public class SelectCityServlet extends Servlet public SelectCityServlet() super(); public void destroy() super.destroy()； public void doGet( ServletRequest request， ServletResponse response) throws ServletException，IOException respons
9、e.setContentType(text/xml); response.setHeader(Cache-Control，no-cache); String state = request.getParameter(state); StringBuffer sb=new StringBuffer(); if (zj.equals(state) sb.append(hangzhouhuzhou); else if(zs.equals(state) sb.append(nanjingyangzhousuzhou); sb.append(); PrintWriter out=response.get
10、Writer(); out.write(sb.toString(); out.close(); 这个类也十分简朴，首先是从request里获得state参数，然后根据state参数生成对应XML文献，最终将XML文献输出到PrintWriter对象里。到目前为止，第一种例子代码已经所有结束。是不是比较简朴？运行图：/多级联动菜单var xml ； /用于保留XML Request对象全局变量var targetSelId； /用于保留要更新选项列表idvar selArray； /用于保留级联菜单id数组/用于创立XML Request对象function createXml () /根据window.XML Request对象与否存在使用不一样创立方式 if (window.XML Request) xml = new XML Request()； /FireFox、Opera等浏览器支持创立方式 else xml = new ActiveXObject(Microsoft.XML );/IE浏览器支持创立方式 /获取列表选项调用函数function buildSelect(selectedId，targetId)
