一、概念
1、Ajax: Asynchronous JavaScript and XML,异步JavaScript和XML
2、用途:用于前后端通信,通过在后台与服务器进行少量数据交换,使网页实现异步更新[1]。
3、优势:无需刷新页面而与服务器端进行通信。
- 比如说,你评论了别人一条动态,评论了之后你的评论很快就能出现,而不需要把整个页面刷新之后才能看到。
4、应用场景[2]
- 数据验证:用户的注册,登录功能,通过与后台交互数据,进行数据验证
- 按需取数据:按照需求,展示所需要的部分数据,而不是一股脑的将整个网页全都展示出来。
- 自动更新页面:百度搜索的提示,出现联想提示语,展示用户最有可能搜索的词汇。
- 自动更新页面:在线聊天室,设置一个定时器,每隔几秒向请求数据,实时更新页面信息。
二、怎么用
1、Ajax的原生操作
格式:
$.ajax({
url:"/", //对应的url
data:"", //要post到后台的数据
type:"", //是post还是get
contentType:"", //要传送的是什么样的数据,一般都是"application/json",可不写
dataType:"", //返回的数据是什么类型,text/xml/json,可不写
success:function(){}, //如果交互成功,要做什么操作
error:function(){}}//如果交互失败,怎么做
);
以用户登录为例:
$(function(){
$("#loginButton").on("click",function(){
var userID=$("#userId").val();
var password=$("#psd").val();
$.ajax({
url:"/login",
data:{"userID":userID,"password":password},
type:"post",
contentType:"application/json",
success:function(response){
alert(response);
},
error:function(){
alert("出错啦");
}
});
});
});
2、使用$.post()和$.get()简化异步操作
格式:
$.post(地址,{参数},回调函数,返回值类型) //返回值类型可写可不写
$.get(地址,{参数},回调函数,返回值类型) //返回值类型可写可不写
以用户登录为例:
$("#login").on("click",function(){
var userID=$("#userId").val();
var password=$("#psd").val();
$.post({url:"/login",data:{userId:userID,psd:password},function(response){
alert(response);
}});
});
开发中这种情况的ajax用得比较多,对于传值为xml的情况用得比较少,先不介绍,等有时间再补上。
三、json数据格式
说了这么多,json到底是啥呢
1、定义:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成[3]。
2、基础结构:json主要基于两种结构
- “名称/值”对的集合:同的语言中,它被理解为对象、记录、结构、字典、哈希表、有键列表、或者关联数组 。
- 值的有序列表:在大部分语言中,它被理解为数组(array)。
3、但是在前后端交互时,一般指第一种,名称-值,就像字典key-value一样。
例如:
data: {userID:"123", psd:"123123"}
4、后台根据这个名称从request中取得参数:
例如:
String userId=request.getParameter("userID");