AJAX实例入门66613.docVIP

您正在看的ajax技术教程是:AJAX实例入门。 　　一、开门见山 　　这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。不管我们是拥护也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。 　　关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字，在这里我也不想照本宣科。 　　只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论： 　　首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。 　　其次是响应速度快，这也是用户强烈体验。 　　然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS，使得复杂的UI的设计变得更加成功。 　　最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。 　　好了，闲话少说，让我们转入正题吧。 　　我们的第一个例子是基于Servlet为后台的一个web应用。 　　二、基于Servlet的AJAX?　　这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。 　　首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样： ?web-app version=2.4 ?xmlns=/xml/ns/j2ee ?xmlns:xsi=/2001/XMLSchema-instance ?xsi:schemaLocation=/xml/ns/j2ee ?/xml/ns/j2ee/web-app_2_4.xsd ??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//EN?html?head?titleMyHtml.html/title??meta http-equiv=keywords content=keyword1,keyword2,keyword3?meta http-equiv=description content=this is my page??!--link rel=stylesheet type=text/css href=./styles.css--??/head?script type=text/javascript?function 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.getElementsB