ajax和json的使用实现前后台分离交互

1.Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和xml),是一种创建交互式网页应用的网页开发技术.

不是新技术,是多种技术的组合应用;

        -基于web标准XHTML和CSS的表现

        -使用DOM(Document Object Model)进行动态显示及交互;

        -使用XHTML和XSLT进行数据交换及相关操作;

        -使用XMLHttpRequest进行异步数据查询/检索;(重点)

        -使用javaScript将所有的东西绑定在一起

Ajax本质上是一个浏览器端的技术.

其实质是通过js内置的ajax引擎对象(XMLHttpRequest)去后台获取数据,后台servlet进行处理,这样从后台获取来的数据就只是传递给了js中的方法,并不是整个界面;

2.通常来说json只是一种数据格式,用来接收后台传递过来的数据,以往的传统前后台数据就是通过后台传过来数据,然后通过${value}来获取值,如果是这样的传统方式的话,前端必须知道后端传过来数据的命名;后台必须知道传过来的数据放入到哪;而且最致命的是整个界面$符号频繁出现,减少的代码的可读性,不方便后期的维护;

在如今这个前后端分离的大势中,ajax和json的使用已经成为必然!

 

1.使用原生的js来创建一个ajax:

html:

<script type="text/javascript">
	function getData(){
	<!-- 创建ajax引擎对象-->
		var ajax=new XMLHttpRequest();
		var name=document.getElementById("uname");
		<!--复写onreadystatement函数-->
		ajax.onreadystatechange=function(){
			//判断ajax状态码,如果不进行判断,数据将会执行四次
			if(ajax.readyState==4){
				if(ajax.status==200){
					//获取相应内容
					var result=ajax.responseText;
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML=result;
				}
				if(ajax.status==404){
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="请求资源不存在!";
				}
				if(ajax.status==500){
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="服务器繁忙!";
				}
			}else{
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="<img src='/img/timg.gif' width='200px' height='100px' />";
			}
		}
		//get发送请求
		//ajax.open("get","ajaxReq");	//异步
		//ajax.send(null);
		//ajax.open("get","ajax",false);	//同步
		
		//post
		ajax.open("post","ajaxReq");
		//必须设置setRequestHeader
		ajax.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
		ajax.send("name=zhangshan");
	}
</script>

后台:

注意:在这里,你必须设置@responsebody标签或者像我一样在类上面设置@RestController

这里你''return"的是json数据,如果你要然后一个类就时间将返回值String改成相应的类就可以了,后天获取到之后直接可以使用;

2.jQuery中ajax和json:

html:

<script  src="js/jquery.min.js"></script>
<script type="text/javascript">
	function getData(){
		 $.ajax({   
				type : "get",
				url : "/getData",
				data : {id:1},
				dataType : "json",
				success : function(data){
					//console.log(data);//后台json数据对象
					console.log(data.name);
					alert(data.name);
					alert("成功获取");
					//console.log(JSON.stringify(data)); //后台json数据转换为jsonStr
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
				    alert(XMLHttpRequest.status);
				    alert(XMLHttpRequest.readyState);
				    alert(textStatus + "ajax出错了");
				}
	 
			}); 
		
	}
</script>

后台是一样的;