AJAX
页面局部刷新 - 发送异步请求
同步现象
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于卡死状态
如果在服务器发生卡顿现象,此时客户端执行多个动作,多个动作将一起等待服务器返回响应,才依次反应。包括,页面的普通按钮–不调用Servlet,只在页面操作
异步现象
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死。
上图表示,当请求发送给服务器时,先发送给浏览器引擎,而后,服务器无响应是,由浏览器引擎负责等待,不影响客户端的其他操作。
AJAX运行原理
AJAX运行原理类似浏览器引擎。
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的JS逻辑代码完成某种页面功能。
JSON格式
JSON作用:
1.使用Ajax进行前后台数据交换
2.移动端与服务端的数据交换
json两种格式:
1.对象格式:{“key1”:obj,“key2”:obj,…}
user对象,用JSON数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
2.数组/集合格式:[obj,obj…]
List 用JSON数据格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
JSON的解析
JSON是JS的原生内容,也就意味着js可以直接取出json对象中的数据
使用JSON对象时,需要导入js库
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
JQuery的Ajax技术
重点三个方法:1)
$ .get(url, [data], [callback], [type])
$("#btn1").click(function() {
$.get("/web08/Servlet1Demo",
"name=zhangsan",
function(data) {
$("#span").html(data);
},"text");
});
--------------------2)
$ .post(url, [data], [callback], [type])
$("#user").blur(function(){
$.get("/web08/Servlet1Demo",
//请求参数提交 可以name=value,也可以使用json
//$("#user").val(),
{
"name":lily,
"age":20
},
function(data){
$("#span").html(data.name);
},"json")//响应为json时
});
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式也可以是JSON格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(JQuery会根据指定的类型自动类型转换);常用的返回类型:text、json、html
--------------------3)
$.ajax({
url:"",//提交地址
data:{
"key":value//请求参数 - 推荐用json格式
},
success:function(data){//响应
},
type:"",//请求方式 GET/POST,默认GET
dataType:"",//响应类型text、json,推荐json
async:false//默认true-异步,设置成false - 同步(表单校验)
});
设置响应格式为json:
//{"isExits":isExits}
response.getWriter().write("{\"isExists\":"+isExists+"}");
Ajax实现表单校验
应用场景:表单中输入的用户名在数据库中已存在
具体数据库比对代码省略,
准备工作:导入库
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
用户不存在的校验功能需要自己定义,validate的自定义。
register.html:
$(function(){
//自定义校验规则
$.validator.addMethod("checkUser",function(value,element,params){
//checkUser为校验规则名称
//value是表单元素中组件的值
var pass= false;
$.ajax({
url:"/web08/CheckUserServlet",//客户端路径,CheckUserServlet是自己编写的用来比对数据的Servlet
data:{
"username":value
},
success:function(data){
//存在-true-不通过
//在Servlet中的响应为json格式的{"isExits":isExits},此处直接调用data.isExists获取他的值
pass=!data.isExists
},
type:"post",
dataType:"json",
async:false//表单校验必须同步
});
return pass;
});
$("#registerForm").validate({
rules:{
username:{
required:true,
maxlength:20,
checkUser:true//判断
},
password:{
required:true,
maxlength:20,
minlength:6
}
},
messages:{
username:{
required:"用户名不能为空",
maxlength:"用户名长度不能超过20",
checkUser:"用户名已存在"
},
password:{
required:"密码不能为空",
minlength:"密码不能少于6位"
}
}
});
});