Ajax实现下拉框级联.doc

1、什么是Ajax，能解决什么问题Asynchronous JavaScript and XML属于前期技术的综合应用，属于客户端技术。可以使JavaScript访问服务器JSP、Servlet。解决问题：提升用户使用系统的体验度。如何提升用户体验：a.页面局部刷新b.异步发送请求-处理c.一个页面功能比较复杂，需要多次与服务器资源交互（一般情况）RIA：Rich Internet ApplicationAjax应用包含的技术如下：a.XMlHttpRequest对象b.JavaScript语言c.XML/DOMd.HTML/XHTML/CSS2、Ajax如何使用以JavaScript为基础，用于创建XMLHttpRequest对象，编写响应处理函数以XMLHttpRequest为核心，使用XML/JSON等格式进行数据传递XMLHttpRequest对象基本使用a. 对象创建 IE：new ActiveXObject(*); 其他FireFox:new /创建对象，通用代码if(window.XMLHttpRequest)xmlreq = new XMLHttpRequest();elsetryxmlreq = new ActiveXObject(Msxml2.XMLHTTP);alert(成功);catch(e)xmlreq = new ActiveXObject(Microsoft.XMLHTTP);b. open(请求类型,URL,异步或同步true/false)函数:创建请求对象c. send(请求参数):如果是get请求，使用send(null);如果postd. onreadystatechange: readyState状态切换事件，可用于注册响应处理函数e. readyState: 请求所处状态 0(未初始化),1(请求正在处理),2(请求处理完毕),3(交互中),4(交互完毕)f. status； HTTP响应的状态code。例如404（资源未找到）,500（程序错误）,200（正确）包目录结构：City.javapackage entity;public class City private int id;private String cname;private int parent;/父节点idpublic City()public City(int id, String cname, int parent) super();this.id = id;ame = cname;this.parent = parent;public int getId() return id;public void setId(int id) this.id = id;public String getCname() return cname;public void setCname(String cname) ame = cname;public int getParent() return parent;public void setParent(int parent) this.parent = parent;Overridepublic String toString() return City id= + id + , cname= + cname + , parent= + parent+ ;CityServlet.javapackage servlet;import java.io.IOException;import java.io.PrintWriter;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import entity.City;/* * Servlet implementation class CityServlet */public class CityServlet extends HttpServlet private static final long serialVersionUID = 1L; /* * see HttpServlet#HttpServlet() */ public CityServlet() super(); / TODO Auto-generated constructor stub /* * see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException / TODO Auto-generated method stubdoPost(request, response);/* * see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException / TODO Auto-generated method stubrequest.setCharacterEncoding(utf-8);response.setContentType(text/xml;charset=utf-8);String pid = request.getParameter(pid);System.out.println(pid);int parent = 0;if(null!=pid&!.equals(pid)parent = Integer.parseInt(pid);List list = new ArrayList();City city = new City(1,北京,0);list.add(city);city = new City(2,杭州,0);list.add(city);city = new City(3,东城区,1);list.add(city);city = new City(4,西城区,1);list.add(city);city = new City(5,西湖区,2);list.add(city);city = new City(6,下城区,2);list.add(city);response.setContentType(text/xml;charset=utf-8);PrintWriter out = response.getWriter();out.println();System.out.println(list.size();for(City city1:list)/判断city中的parent是否与客户端传过来的相等if(city1.getParent()=parent)out.println();out.println(+city1.getId()+);out.println(+city1.getCname()+);out.println();out.println();out.flush();out.close();sample04.htmlInsert title herevar xmlreq = false;/*发送请求，执行回调处理*cid：查询city表时使用的parentId*selelctObj：c1或c2下拉选择组件对象*/function sendRequest(cid,selelctObj) /创建XMLHttpRequest对象 if(window.XMLHttpRequest) xmlreq = new XMLHttpRequest(); else try xmlreq = new ActiveXObject(Msxml2.XMLHTTP); catch(e) xmlreq = new ActiveXObject(Microsoft.XMLHTTP); /以get方式发送请求，传递查询时使用的parentId xmlreq.open(get,CityServlet?pid=+cid+&dt=+new Date().getTime(); xmlreq.onreadystatechange = function() if(xmlreq.readyState = 4) if(xmlreq.status = 200) /获取服务器响应回来的XML文档对象 var xmlDoc = xmlreq.responseXML; var city = xmlDoc.getElementsByTagName(city); selelctObj.length = 0; /清空下拉单 selelctObj.options.add(new Option(-请选择-),-1); /根据服务器返回的数据循环生成option选项 for(i=0;icity.length;i+) var id = cityi.getElementsByTagName(id)0.firstChild.data; var name = cityi.getElementsByTagName(name)0.firstChild.data; selelctObj.options.add(new Option(name,id); ; xmlreq.send(null);/加载第一个下拉框function loadFirst() var c1 = document.getElementById(c1); sendRequest(0,c1);/加载数据库city表中parent=0的数据，然后加载第一个下拉组/加载第二