Ajax返回XML数据
2014-01-30 19:10
281 查看
* 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>");
}
}
* 服务器端:
* 设置响应首部信息,"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; } }
相关文章推荐
- AJAX示例应用-2(两级菜单的联动)-方式3(服务器返回XML数据,真正的AJAX应用)
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- Ajax处理XML,XMLHttpRequest对象的创建和访问servlet并返回xml数据到页面展示
- 初涉Ajax,以post或get方法发送数据,以json或xml形式接收服务器返回的请求
- jquery中ajax方法返回的三种数据类型:text、json、xml;
- Ajax servlet 返回xml数据乱码问题
- AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据
- 浅谈Ajax返回数据的3种格式——HTML、XML、JSON
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- Ajax返回xml类型数据
- javascript 解析ajax返回的xml和json格式的数据
- AJAX用jquery解析servlet返回回来的XML 数据
- AJAX 示例:xml数据类型返回
- Ajax返回xml类型数据
- ajax(二) ajax处理返回数据格式xml 实例
- ajax返回数据类型 text json xml
- jquery ajax 请求、解析返回来的xml数据
- Ajax调用返回json,xml数据类型(0517--pm)
- javascript解析ajax返回的xml和json格式数据实例详解
- AJAX-----06XMLHttpRequest对象的处理返回的XML类型数据