AJAX

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位"
				}
		 }
	 });
 });