Ajax 引擎 传输数据的方法

Ajax 引擎 用XML传输数据：

1.传输单个对象

新建一个setvlet，在doGet方法中实现如下代码：

                //防止中文乱码
                request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//模拟从数据库查询数据
		Dog d = new Dog();
		d.setName("阿黄");
		d.setAge(3);
		d.setZhuren("明珠");
		d.setPinzhong("金毛");
		//传输到ajax引擎
		response.getWriter().append("<?xml version='1.0' ?>");
		response.getWriter().append("<dog>");
		response.getWriter().append("<name>"+d.getName()+"</name>");
		response.getWriter().append("<age>"+d.getAge()+"</age>");
		response.getWriter().append("<zhuren>"+d.getZhuren()+"</zhuren>");
		response.getWriter().append("<pinzhong>"+d.getPinzhong()+"</pinzhong>");
		response.getWriter().append("</dog>");    

然后新建一个html，在head头里边引用ajax引擎，代码如下：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>  //导包
<script type="text/javascript">
$(document).ready(function(){
	$("#ss").click(function(){
		
		$.ajax({
			url:"dangedog",    //我们新建的select
			data:{},
			type:"POST",　　　　
			dataType:"XML",
			success:function(httpdata){
　　　　　　　　　　　　　　　　//接收数据
			    var n =	$(httpdata).find("name").text();
			    var a =	$(httpdata).find("age").text();
			    var z =	$(httpdata).find("zhuren").text();
			    var p =	$(httpdata).find("pinzhong").text();
			　　//界面显示	
				var ul = "<ul>";
				ul += "<li>" +n+"</li>"; 
				ul += "<li>" +a+"</li>"; 
				ul += "<li>" +z+"</li>"; 
				ul += "<li>" +p+"</li>"; 
				ul += "</ul>";
				
				$("#div").append(ul);
			}
			
			
		});
		
	});
	
	
});

</script>

body里边的代码如下

<span id="ss">点击有惊喜</span>
<div id="div">

</div>

运行程序，当点击span这一标签时，结果如下：　　

2.传输集合时

同样的方法，新建一个servlet，在doGet方法中实现如下代码

                //防止中文乱码
                request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//模拟从数据库中获取数据
                Dog d1 = new Dog();
		d1.setName("阿黄");
		d1.setAge(3);
		d1.setZhuren("明珠");
		d1.setPinzhong("金毛");
		Dog d2 = new Dog();
		d2.setName("小明");
		d2.setAge(2);
		d2.setZhuren("小明");
		d2.setPinzhong("哈士奇");
		Dog d3 = new Dog();
		d3.setName("二萌");
		d3.setAge(5);
		d3.setZhuren("二蒙");
		d3.setPinzhong("藏獒");
		//传输到ajax引擎
		ArrayList<Dog> list = new ArrayList<Dog>();
		list.add(d1);
		list.add(d2);
		list.add(d3);
		response.getWriter().append("<?xml version='1.0' ?>");
		response.getWriter().append("<old>");
		for(Dog d : list){
			response.getWriter().append("<dog>");
			response.getWriter().append("<name>"+d.getName()+"</name>");
			response.getWriter().append("<age>"+d.getAge()+"</age>");
			response.getWriter().append("<zhuren>"+d.getZhuren()+"</zhuren>");
			response.getWriter().append("<pinzhong>"+d.getPinzhong()+"</pinzhong>");
			response.getWriter().append("</dog>");
		}		
		response.getWriter().append("</old>");    

然后新建一个html文件，在head头里边引用ajax引擎，并导包，代码如下：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>            //导包
<script type="text/javascript">
$(document).ready(function(){
	$("#ss").click(function(){
		$.ajax({
			url:"jihedog",　　　　　　　　　　//我们新建的servlet文件的路径
			data:{},
			type:"POST",
			dataType:"XML",　　　　　　　　　//用XML格式获取数据
			success:function(httpdata){
				var d = $(httpdata).find("dog");
			　　　　　//把接收到的数据强制转换成jquery类型，用jquery的find方法查询我们想要的数据
				for(var i=0 ; i<d.length;i++){
					var n = $(d).eq(i).find("name").text();
					var a = $(d).eq(i).find("age").text();
					var z = $(d).eq(i).find("zhuren").text();
					var p = $(d).eq(i).find("pinzhong").text();
					//将数据显示出来
					var tr = "<tr>";
					tr += "<td>" + n + "</td>";
					tr += "<td>" + a + "</td>";
					tr += "<td>" + z + "</td>";
					tr += "<td>" + p + "</td>";
					tr += "</tr>";
					
					$("#tb").append(tr);
				}
			}	
		})
	});		
});
</script>

在body中的代码

<span id="ss">点击有惊喜</span>
<table id="tb">


</table>

运行程序，点击span，结果如下：

Ajax引擎 用JSON传输数据：

1.用JSON传输单个对象

和用XML传输数据方法类似，同样是新建一个servlet，在doGet方法中实现如下代码：

		//防止中文乱码
　　　　　　　　  request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
　　　　　　　　　//模拟获取数据库数据
		Dog d = new Dog();
		d.setName("阿黄");
		d.setAge(3);
		d.setZhuren("明珠");
		d.setPinzhong("金毛");
		//用JSON将数据封装，并传输到Ajax引擎
		JSONObject obj = new JSONObject();
		obj.put("name", d.getName());
		obj.put("age", d.getAge());
		obj.put("zhuren", d.getZhuren());
		obj.put("pinzhong", d.getPinzhong());
		response.getWriter().append(obj.toString());

然后新建一个html或者jsp文件，在head头中导包并引用Ajax引擎，代码如下：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#ss").click(function(){
		$.ajax({
			url:"jsondog",
			data:{},
			type:"POST",
			dataType:"JSON",
			success:function(httpdata){
				//接收到的就是一个对象可以直接引用它的属性和方法
				$("#ul").append("<li>"+httpdata.name+"</li>");
				$("#ul").append("<li>"+httpdata.age+"</li>");
				$("#ul").append("<li>"+httpdata.zhuren+"</li>");
				$("#ul").append("<li>"+httpdata.pinzhong+"</li>");	
			}	
		})
	})
})
</script>

在body中的代码如下：

<span id="ss">点击有惊喜</span>
<ul id="ul">


</ul>

运行程序，点击span，结果如下：

　　

 

从方法上来看，用JSON更加方便，无论是从servlet传输到ajax，还是ajax接收数据，都更加的灵活。