预览加载中，请您耐心等待几秒...

2023年基于ajax的二级动态菜单.doc

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共21页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

这些时间，瞎子也看得见，AJAX正大踏步朝咱们走来。不管咱们是拥护也好，反对也罢，还是视而不见，AJAX像一阵时尚，席转了咱们所有人。有关AJAX定义也好，大话也好，早有人在网上刊登了汗牛充栋文字，在这里我也不想照本宣科。只想说说我感觉到某些长处，对于不对，人们也可以和我讨论：首先是异步交互，顾客感觉不到页面提交，当然也不等待页面返回。这是使用了AJAX技术页面给顾客第一感觉。另首先是响应速度快，这也是顾客强烈体验。然后是与咱们开发者有关，复杂UI成功处理，一直以来，咱们对B/S模式UI不如C/S模式UI丰富而苦恼。目前由于AJAX大量使用JS，使得复杂UI设计变得愈加成功。最终，AJAX祈求返回对象为XML文献，这也是一种时尚，就是WEBSERVICE时尚同样。易于和WEBSERVICE结合起来。好了，闲话少说，让咱们转入正题吧。咱们第一种例子是基于Servlet为后台一种web应用。基于ServletAJAX这是一种很常用UI，当顾客在第一种选用框里选用ZHEJIANG时，第二个选用框要出现ZHEJIANG都市；当顾客在第一种选用框里选用JIANGSU时，第二个选用框里要出现JIANGSU都市。首先，咱们来看配置文献web.xml，在里面配置一种servlet，跟往常同样：<web-appversion="2.4"xmlns=""xmlns:xsi=""xsi:schemaLocation=""><servlet><servlet-name>SelectCityServlet</servlet-name><servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class></servlet><servlet-mapping><servlet-name>SelectCityServlet</servlet-name><url-pattern>/servlet/SelectCityServlet</url-pattern></servlet-mapping></web-app>然后，来看咱们JSP文献：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>MyHtml.html</title><meta-equiv="keywords"content="keyword1,keyword2,keyword3"><meta-equiv="description"content="thisismypage"><!--<linkrel="stylesheet"type="text/css"href="./styles.css">--></head><scripttype="text/javascript">functiongetResult(stateVal){varurl="servlet/SelectCityServlet?state="+stateVal；if(window.XMLRequest){req=newXMLRequest()；}elseif(window.ActiveXObject){req=newActiveXObject("Microsoft.XML")；}if(req){req.open("GET",url，true)；req.onreadystatechange=complete；req.send(null)；}}functioncomplete(){if(req.readyState==4){if(req.status==200){varcity=req.responseXML.getElementsByTagName("city")；file://alert(city.length);varstr=newArray();for(vari=0;i<city.length;i++){str[i]=city[i].firstChild.data;}file://alert(document.getElementById("city"));buildSelect(str,document.getElementById("city"));}}}functionbuildSelect(str,sel){sel.options.length=0;for(vari=0;i<str.length;i++){sel.options[sel.options.length]=newOption(str[i],str[i])}}</script><body><selectname="state"onChange="getResult(this.value)"><opt