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

用Eclipse与AJAX技术在JSP中实现动态加载列表框文/曹坤首先介绍一下什么是Eclipse与AJAX，Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。AJAX技术即异步 JavaScript 和 XML（Asynchronous JavaScript with XML），支持动态、异步的 Web 体验，却不需要页面刷新，是目前热炒的WEB2.0技术的核心。一、 创建一个JSP页面，代码如下：MyHtml.html/*这里的onChange事件的函数getResult()需要在以下篇幅进行实现，该事件的含义是当列表框选择的内容被改变后即被触发*/ 浙江省 江苏省 CITY二、 在以上的JSP页面中添加以下javascript代码,需要在以上JSP页面的红色部分内进行添加：1、创建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。2、增加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); 3、增加complete()函数，实现以上代码中的xmlHttpRequest.onreadystatechange 所调用的javascript事件，主要作用是向列表框city中动态添加数据。function complete() /* xmlHttpRequest的readyState表示请求的状态，4表示完成。*/ if (xmlHttpRequest.readyState = 4) /* xmlHttpRequest的status表示服务器HTTP的状态码，200对应OK，404对应Not Found（未找到）*/if (xmlHttpRequest.status = 200) /*以下代码是取得服务器所返回的XML类型数据中的city节点，并根据city节点的长度向列表框中添加数据*/ var city = xmlHttpRequest.responseXML.getElementsByTagName(city); var sel = document.getElementById(city);sel.options.length=0;var str; for(var i=0;icity.length;i+) str = cityi.firstChild.data; sel.optionssel.options.length=new new Option(str,str); 三、 以上我们所做的主要是在客户端的实现，以下我们需要创建服务器端的实现，即servlet文件,本篇中主要是SelectCityServlet.java文件，如下所示：package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; /* *author 曹坤，创建日期 2006-5-4 */public class SelectCityServlet extends HttpServlet public SelectCityServlet() super();public void destroy() super.destroy(); public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException /*这里一定要设置,不然在客户端则不能按XML格式取得数据，字符集也应和客户端的设置一样，不然汉字会出现乱码。*/response.setContentType(text/xml; charset=gb2312);response.setHeader(Cache-Control, no-cache);String state = request.getParameter(state);StringBuffer sb = new StringBuffer();if (zj.equals(state) sb.append(杭州宁波); else if (js.equals(state) sb.append(南京苏州);sb.append();PrintWriter out = response.getWriter();out.write(sb.toString();out.close();public void init() throws ServletException 创建完SelectCityServlet.java文件后，需要在web.xml文件中添加对该servlet的声明，只有进行添加后，才能正常调用servlet文件，如下： This is the description of my J2EE component This is the display name of my J2EE component SelectCityServlet servlet.SelectCityServl