ajax返回的两种数据类型xml和json用法

用xml传单个数据

首先在servlet类里面写好要传的数据，Dog是模拟从数据库中提取的内容，

用response.getwrite（）.append（）传回数据，要注意表头<?xml version='1.0'?>不能写错，根是唯一的

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//模拟从数据库中提取的信息
		Dog d = new Dog();
		d.setName("name");
		d.setZhuren("haha");
		d.setAge(2);
		d.setZhonglei("aaa");
		
		//用xml往回传
		response.getWriter().append("<?xml version='1.0'?>");//表头
		response.getWriter().append("<dog>");//根，是唯一的
		response.getWriter().append("<name>"+d.getName()+"</name>");
		response.getWriter().append("<zhuren>"+d.getZhuren()+"</zhuren>");
		response.getWriter().append("<age>"+d.getAge()+"</age>");
		response.getWriter().append("<zhonglei>"+d.getZhonglei()+"</zhonglei>");
		response.getWriter().append("</dog>");
		
	}

在jsp页面

首先引用"js/jquery-1.11.1.min.js"，在#d元素上写一个click事件，里面用ajax引擎处理数据，

url是接收数据的路径，datatype是返回什么类型的数据

•"xml": 返回 XML 文档，可用 jQuery 处理。
•"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
•"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
•"json": 返回 JSON 数据 。
•"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
•"text": 返回纯文本字符串

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#d").click(function(){
			$.ajax({
				url:"textdog",//从textdog的servlet类中接受数据
				data:{},
				type:"POST",
				dataType:"xml",//返回类型是xml
				success:function(aaa){
					//解析返回的aaa
					var n = $(aaa).find("name").text();
					var z = $(aaa).find("zhuren").text();
					var a = $(aaa).find("age").text();
					var zl =$(aaa).find("zhonglei").text();
					//在页面上把数据显示在通过#u找到的元素里面
					$("#u").append("<li>"+n+"</li>");
					$("#u").append("<li>"+z+"</li>");
					$("#u").append("<li>"+a+"</li>");
					$("#u").append("<li>"+zl+"</li>");
				}
			});
		});
	});

</script>

　演示结果：

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 用xml传集合，

首先在servlet类里面写好要传的数据，跟单个基本一样，注意一下根，因为有多个dog 所以要用一个更大的chongwu作为根， 把所有的dog包起来

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//模拟从数据库提取的数据
		Dog d1 = new Dog();
		d1.setName("日天");
		d1.setZhuren("爸爸");
		d1.setAge(1);
		d1.setZhonglei("泰迪");
		Dog d2 = new Dog();
		d2.setName("拖拖");
		d2.setZhuren("坨坨粑粑");
		d2.setAge(2);
		d2.setZhonglei("金毛");
		Dog d3 = new Dog();
		d3.setName("凡凡");
		d3.setZhuren("凡凡爸爸");
		d3.setAge(3);
		d3.setZhonglei("哈士奇");
		//将d1d2d3放到list中
		ArrayList<Dog> list = new ArrayList<>();
		list.add(d1);
		list.add(d2);
		list.add(d3);
		//用xml把数据传到页面
		response.getWriter().append("<?xml version='1.0'?>");//表头
		//根，这里因为不只一个dog，所以我们用一个更大的chongwu包起来
		response.getWriter().append("<chongwu>"); 
		//遍历
		for(Dog d : list){
			response.getWriter().append("<dog>");
			response.getWriter().append("<name>"+d.getName()+"</name>");
			response.getWriter().append("<zhuren>"+d.getZhuren()+"</zhuren>");
			response.getWriter().append("<age>"+d.getAge()+"</age>");
			response.getWriter().append("<zhonglei>"+d.getZhonglei()+"</zhonglei>");
			response.getWriter().append("</dog>");
		}
		response.getWriter().append("</chongwu>");
}

在jsp，同样先引入jar包

要先把所有的dog放到一个dogs里面，相当于一个数组，

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#d").click(function(){
		$.ajax({
			url:"textdog1",
			data:{},
			type:"POST",
			dataType:"XML",
			success:function(hhh){
				//先把所有的dog放到dogs里面，相当于一个数组，不是一个对象
				var dogs = $(hhh).find("dog");
				//tb是找到的jquery对象
				var tb =$("#tb");
				//循环dogs
				for(var i =0;i<dogs.length;i++){
					var n = $(dogs).eq(i).find("name").text();		
					var z = $(dogs).eq(i).find("zhuren").text();
					var a = $(dogs).eq(i).find("age").text();
					var lei =$(dogs).eq(i).find("zhonglei").text();
					//把信息拼接
					var tr = "<tr>";
					tr += "<td>"+n+"</td>";
					tr += "<td>"+z+"</td>";
					tr += "<td>"+a+"</td>";
					tr += "<td>"+lei+"</td>";
					tr += "</tr>";
					//把tr放到td中
					$(tb).append(tr);
				}
			}
		})
	})
})

</script>

　结果演示：

　

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

用json传数据，首先导入json jar包，在servlet类里面写好要传的数据

先把dog放在jo这个json中，然后把jo放到obj这个json中，在页面中用jo中的key就可以直接取值了

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//编码格式
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		//
		Dog d = new Dog();
		d.setName("拖拖");
		d.setZhuren("李哈哈");
		d.setAge(2);
		d.setZhonglei("金毛");
		//把dog放到json中，用put赋值，key和value
		JSONObject jo = new JSONObject();
		jo.put("name",d.getName());
		jo.put("zhuren", d.getZhuren());
		jo.put("age", d.getAge());
		jo.put("zhonglei", d.getZhonglei());
		 
		//obj这个json中再放jo这个json，obj里面放着jo
		JSONObject obj = new JSONObject();
		obj.put("dog", jo);
		response.getWriter().append(jo.toString());
	}

在jsp中，把返回数据类型改为json，然后把数据显示在页面中

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#d").click(function(){
			$.ajax({
				url:"textjson1",//从textjson1的servlet类中接受数据
				data:{},
				type:"POST",
				dataType:"JSON",//返回的数据类型是json
				success:function(aaa){
				//把数据显示在通过#u找到的元素里面	
				 $("#u").append("<li>"+aaa.name+"</li>");
				 $("#u").append("<li>"+aaa.zhuren+"</li>");
				 $("#u").append("<li>"+aaa.age+"</li>");
				 $("#u").append("<li>"+aaa.zhonglei+"</li>");
				 
				}
			});
		});
	});

</script>

　显示结果：