* XMLHttpRequest对象的responseXML属性:XML格式
* 服务器端:
* 设置响应首部信息,"Content-Type"为"text/xml"
* 手工构建一个xml格式的数据内容
* 如何将javabean、List、Array和Map集合转换成xml数据格式?
* 第三方工具:xStream
* 核心包:xstream-1.4.4.jar
* 必要依赖包:xpp3_min-1.1.4c.jar
* 客户端:XMLHttpRequest对象的responseXML属性
XmlFileServlet.java
public class XmlFileServlet extends HttpServlet { public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { //如果服务器端向客户端响应xml格式的数据,需要设置响应首部信息:"Content-Type"为"text/xml" response.setContentType("text/xml;charset=utf-8"); PrintWriter out = response.getWriter(); //查询数据库,结果集都封装在javabean、List、Array和Map集合中 //如何将javabean、List、Array和Map集合转换成xml数据格式? //手工构建一个xml格式的数据内容 out.println("<china>"); out.println("<province name='吉林省'>"); out.println("<city>长春</city>"); out.println("<city>吉林市</city>"); out.println("<city>四平</city>"); out.println("<city>松原</city>"); out.println("<city>通化</city>"); out.println("</province>"); out.println("<province name='辽宁省'>"); out.println("<city>沈阳</city>"); out.println("<city>大连</city>"); out.println("<city>鞍山</city>"); out.println("<city>抚顺</city>"); out.println("<city>铁岭</city>"); out.println("</province>"); out.println("<province name='山东省'>"); out.println("<city>济南</city>"); out.println("<city>青岛</city>"); out.println("<city>威海</city>"); out.println("<city>烟台</city>"); out.println("<city>潍坊</city>"); out.println("</province>"); out.println("</china>"); } }
<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>级联菜单</title> <script type="text/javascript" src="./xmFile.js"> </script> </head> <body> <select id="province" name="province"> <option value="">请选择....</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> </html>
window.onload = function(){ var xhr = ajaxFunction(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ if(xhr.status==200){ var docXml = xhr.responseXML; var provinceXmlElements = docXml.getElementsByTagName("province"); for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement = provinceXmlElements[i]; var provinceXmlValue = provinceXmlElement.getAttribute("name"); var option = document.createElement("option"); option.setAttribute("value",provinceXmlValue); var text = document.createTextNode(provinceXmlValue); option.appendChild(text); var provinceElement = document.getElementById("province"); provinceElement.appendChild(option); } document.getElementById("province").onchange = function(){ var cityElement = document.getElementById("city"); var options = cityElement.getElementsByTagName("option"); for(var z=1;z<options.length;z++){ cityElement.removeChild(options[1]); z--; } var provinceValue = this.value; for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement = provinceXmlElements[i]; var provinceXmlValue = provinceXmlElement.getAttribute("name"); if(provinceValue==provinceXmlValue){ var cityXmlElements = provinceXmlElement.getElementsByTagName("city"); for(var j=0;j<cityXmlElements.length;j++){ var cityXmlElement = cityXmlElements[j]; var cityXmlValue = cityXmlElement.firstChild.nodeValue; var option = document.createElement("option"); option.setAttribute("value",cityXmlValue); var text = document.createTextNode(cityXmlValue); option.appendChild(text); cityElement.appendChild(option); } } } } } } } xhr.open("get","../xmlFileServlet?timeStamp="+new Date().getTime(),true); xhr.send(null); function ajaxFunction(){ var xmlHttp; try{ // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } }原文链接:https://www.f2er.com/ajax/165290.html