AJAX实例入门(1)

《AJAX实例入门(1)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、AJAX实例入门一、开门见山这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。不管我们是拥护也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字，在这里我也不想照本宣科。只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。其次是响应速度快，这也是用户强烈体验。然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S

2、模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS，使得复杂的UI的设计变得更加成功。最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEBSERVICE潮流一样。易于和WEBSERVICE结合起来。好了，闲话少说，让我们转入正题吧。我们的第一个例子是基于Servlet为后台的一个web应用。二、基于Servlet的AJAX第一个例子是关于关联选择框的问题，如图：这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里

3、选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：SelectCityServletcom.stephen.servlet.SelectCityServletSelectCityServlet/servlet/SelectCityServlet

5、ern>然后，来看我们的JSP文件：functiongetResult(stateVal){varurl="servlet/SelectCityServlet?state="+stateVal;if(window.XMLHttpRequest){req=newXMLHttpRequest();}elseif(window.ActiveXObject){req=newActiveXO

7、bject("Microsoft.XMLHTTP");}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");//alert(city.length);varstr=newArray();fo

8、r(vari=0;i