用Eclipse与AJAX技术在JSP中实现动态加载列表框.docVIP

用Eclipse与AJAX技术在JSP中实现动态加载列表框 首先介绍一下什么是Eclipse与AJAX，Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。 AJAX技术即异步 JavaScript 和 XML（Asynchronous JavaScript with XML），支持动态、异步的 Web 体验，却不需要页面刷新，是目前热炒的WEB2.0技术的核心。 创建一个JSP页面，代码如下： %@page contentType=text/html; charset=gb2312% html head titleMyHtml.html/title /head body /*这里的onChange事件的函数getResult()需要在以下篇幅进行实现，该事件的含义是当列表框选择的内容被改变后即被触发*/ select name=state onChange=getResult(this.value) 　　 option value=zj浙江省/option 　　 option value=js江苏省/option /select select id=city 　　 option value=CITY/option /select /body script language=javascript type=text/javascript /script /html 在以上的JSP页面中添加以下javascript代码,需要在以上JSP页面的红色部分内进行添加： 创建AJAX对象，即XMLHttpRequest,添加以下JavaScript代码： var xmlHttpRequest = false ; function createXMLHttpRequest() { if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlHttpRequest = new ActiveXObject(Msxml2.XMLHTTP); } catch(e) { try { xmlHttpRequest = new ActiveXObject(Microsoft.XMLHTTP); } catch(e) { xmlHttpRequest = false; } } } } 以上的代码能在不同类型的浏览器上创建XMLHttpRequest对象，用于实现异步 JavaScript。 增加getResult()函数，用于响应列表框的onchange事件： function getResult(stateVal) { /*通过java的servlet技术，取得列表框中需要动态更新的数据*/ var url = servlet/SelectCityServlet?state=+stateVal; /*创建xmlHttpRequest对象*/ 　createXMLHttpRequest() if(xmlHttpRequest){ /* 在xmlHttpRequest对象的open方法中，第一个参数表示向服务器传递信息的方式，主要有两种，即“GET”和“POST”，第二个参数表示所调用资源的URL，第三个参数表示调用服务器资源是异步的还是同步的，默认为true即异步，如设置为false即同步,则失去了AJAX的意义 */ 　　 xmlHttpRequest.open(GET,url, true); /*以下代码，xmlHttpRequest每一次状态改变都会触发该事件，它通常是一个javascript事件*/ 　　 xmlHttpRequest.onreadystatechange = complete; /*以下代码，具体向服务器发送请求*/ 　　 xmlHttpRequest.send(null); 　　 } } 增加complete()函数，实现以上代码中的xmlHttpRequest.onreadystatechange 所调用的javascript事件，主要作用是向列表框city中动态添加数据。 function complete(){