2021年基于ajax的二级动态菜单.docVIP

?????这些时间，瞎子也看得见，AJAX正大踏步朝咱们走来。不论咱们是拥护也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了咱们所有人。 　　关于AJAX定义也好，大话也好，早有人在网上刊登了汗牛充栋文字，在这里我也不想照本宣科。 　　只想说说我感觉到某些长处，对于不对，人们也可以和我讨论： 　　一方面是异步交互，顾客感觉不到页面提交，固然也不等待页面返回。这是使用了AJAX技术页面给顾客第一感觉。 　　另一方面是响应速度快，这也是顾客强烈体验。 　　然后是与咱们开发者有关，复杂UI成功解决，始终以来，咱们对B/S模式UI不如C/S模式UI丰富而苦恼。当前由于AJAX大量使用JS，使得复杂UI设计变得更加成功。 　　最后，AJAX祈求返回对象为XML文献，这也是一种潮流，就是WEB SERVICE潮流同样。易于和WEB SERVICE结合起来。 　　好了，闲话少说，让咱们转入正题吧。 　　咱们第一种例子是基于Servlet为后台一种web应用。 　　基于ServletAJAX　　 这是一种很常用UI，当顾客在第一种选取框里选取ZHEJIANG时，第二个选取框要浮现ZHEJIANG都市；当顾客在第一种选取框里选取JIANGSU时，第二个选取框里要浮现JIANGSU都市。 　　一方面，咱们来看配备文献web.xml，在里面配备一种servlet，跟往常同样： web-app version=2.4 xmlns= xmlns:xsi= xsi:schemaLocation= servlet servlet-nameSelectCityServlet/servlet-name servlet-classcom.stephen.servlet.SelectCityServlet/servlet-class /servlet servlet-mapping servlet-nameSelectCityServlet/servlet-name url-pattern/servlet/SelectCityServlet/url-pattern /servlet-mapping /web-app 　　然后，来看咱们JSP文献： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhtmlheadtitleMyHtml.html/titlemeta http-equiv=keywords content=keyword1,keyword2,keyword3meta http-equiv=description content=this is my page!--link rel=stylesheet type=text/css href=./styles.css--/headscript type=text/javascriptfunction getResult(stateVal) {　　 var url = servlet/SelectCityServlet?state=+stateVal；　　 if (window.XMLHttpRequest) { 　　 req = new XMLHttpRequest()；　　 }else if (window.ActiveXObject) { 　　 req = new ActiveXObject(Microsoft.XMLHTTP)；　　 } 　　 if(req){ 　　 req.open(GET,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++){　　 str[i]=city[i].firstChild.data;　　 }　　 file://alert(document.getElementById(city));　　 buildSelect(str,document.getElementById(city));　　 }　　 }}function buildSelect(str,sel) {