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>
后台是一样的;
更多推荐
所有评论(0)