从专科一直想了解Ajax，Cookie相关技术，直至毕设开发项目，终于了解了一遍，故作此文，作为记录，又可以作为新手入门的简单了解。
首先我们看一看前端页面的form表单：
<div class="form-signin text-center">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputUserName" class="sr-only">用户名</label>
<input type="email" id="inputUserName" class="form-control s-margin-2" placeholder="用户名" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control s-margin-1" placeholder="密码" required>
<button class="btn btn-lg btn-primary btn-block s-margin-2" onclick="userLogin()">登录</button>
<button class="btn btn-lg btn-default btn-block s-margin-2" onclick="toRegister()">注册</button>
</div >
下面是JS代码：
function userLogin() {
var user = {};
user.userName = document.getElementById("inputUserName").value;
user.userPassword = document.getElementById("inputPassword").value;
var response;
$.ajax({
async : false,//发送同步请求
type : 'POST', //请求方式为post
url : address+"userLogin", //发送请求的地址。
data : user, //发送到服务器的数据
dataType : 'json',//预期服务器返回的数据类型
success : function(result) {
response = result;
},
error : function(result) {
alert('服务器异常');
}
});
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
}
我们想要完成的功能是通过Ajax验证登录表单，并设置Cookie
下面，我们用蓝色文字，记录整个代码执行的过程
1.通过点击登录按钮，触发"userLogin()" 函数
2.执行JS中"userLogin()" 函数
3.获取用户名，密码中输入的数据，存入user变量
4.进行ajax进行前后端交互
5.通过设置的参数,依据url的路径把data中的数据传送过去
下面介绍列举ajax常见参数
1.url : String类型的参数，（默认为当前页地址）发送请求的地址。
2.type : String类型的参数，请求方式（post或get）默认为get。 : 可以用其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout: : Number类型的参数，设置请求超时时间（毫秒）
4.async : Boolean类型的参数， 默认设置为true：所有请求均为异步请求，即数据请求的同时，其他代码语句也可以同步执行 false：发送同步请求，必须是一个挨着一个的去执行，前面的没有结束，后面的代码就处于一个阻塞的状态
5.cache : Boolean类型的参数，默认为true（当dataType为script时，默认为false） : 设置为false将不会从浏览器缓存中加载请求信息。
6.data : Object或String类型的参数，发送到服务器的数据 : 如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后 :
对象必须为key/value格式，例如{k1:“v1”,k2:“v2”}转换为&k1=v1&k2=v2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{v:[“k1”,“k2”]}转换为&k=v1&k=v2。7.dataType : String类型的参数，预期服务器返回的数据类型。
1）xml：返回XML文档，可用JQuery处理。
2）script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
3） json：返回JSON数据。 : ·
4）jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
5）text：返回纯文本字符串。
6）html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 : :
如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。8.beforeSend : 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数
}9.complete： 要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}10.success : 要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}11.error : 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}12.contentType : 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
我们接着往下看，大家先看代码，再看步骤分析
UserController.java
/**
* 用户登录
* @param userName
* @param userPassword
* @return
*/
@PostMapping(value = "/userLogin")
public Response userLogin(@RequestParam("userName")String userName,
@RequestParam("userPassword")String userPassword){
return userService.userLogin(userName,userPassword);
}
}
6.后端依据url路径，匹配相应的Controller
7.进入userLogin方法，参数接收ajax传入的值
8.调用UserService中userLogin方法,该方法由UserServiceImpl实现
UserService:
import com.leaveword.utils.Response;
public interface UserService {
Response getUser(Integer userId);
Response userRegister(String userName,String userPassword);
Response userLogin(String userName,String userPassword);
}
展示UserServiceImpl代码：
@Override
public Response userLogin(String userName, String userPassword) {
//判断是否输入
if(CommonTools.isEmpty(userName))
return new Response("-1","用户名不能为空");
if(CommonTools.isEmpty(userPassword))
return new Response("-1","用户密码不能为空");
//判断数据库是否存在
User user = userRepository.findByUserName(userName);
if(user != null){
if(user.getUserPassword().equals(userPassword)) {
user.setUserPassword("");
return new Response("0", JSON.toJSONString(user));
}
else
return new Response("-1","密码错误");
}
else
return new Response("-1","用户不存在");
}
9.通过CommonTools类中的isEmpty方法，判断输入框是否输入
这里记住，若如果查询成功，Response里两个参数,第一个赋值为0， 第二个赋值为user转换的JSON数据
展示CommonTools代码：
import java.sql.Timestamp;
public class CommonTools {
public static boolean isEmpty(String str){
if(str == null)
return true;
if(str.isEmpty())
return true;
if(str == "" || str.equals(""))
return true;
return false;
}
public static Timestamp getCurrentTime(){
return new Timestamp(System.currentTimeMillis());
}
}
10.再userRepository查询数据库是否存在页面传过来的的用户名，密码
UserRepository：
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Integer> {
User findByUserName(String userName);
}
11.把结果返回Response类型的response变量
Response:
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Response {
private String status;
private Object content;
}
注意：resonse变量现在已经获得两个值，标识符：status和内容：content,把该变量从Service,Controller依次返回，最终响应给前端Ajax中
12.前端页面Ajax通过获得结果，
如请求成功，赋值给success : function(result) 中的result，再赋值给前端 response变量
如请求失败，弹出提示框 alert('服务器异常')，提示服务器异常
下面讲解如何设置cookie
我们再把前端js代码中设置cookie的代码放一下
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
我们知道，如果ajax中post请求成功，会在response带进两个变量，成功会
13.判断response.status是否为0
若不为0，则把此时的content放在提示框中 显示
若为0，则代表请求确实成功了，随后，调用util.js中的 setCookie（）方法
setCookie()具体方法定义再util.js中，下面展示util.js代码
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);//设置Cookie保存的时间
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
var strCookie=window.document.cookie;
alert("function setCookie里"+strCookie);//弹窗提示
}
14.调用setCookie（）赋值
下面介绍Cookie常见参数
1.name：必选参数，这个是cookie的变量名
2.value：可选参数，这个cookie变量的值
3.expire：可选参数，这个是用来设置cookie变量保存的时间。 1）.cookie变量保存的时间是UNIX时间戳减去当前的UNIX时间戳。（UNIX时间戳：是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数)。
2）.通过time()函数获取当前的UNIX时间戳，再加上我们要保存的时间（单位为秒）Eg:setcookie(“user”,”大鱼海”,time()+3600),这样我们就可以保存user这个cookie变量的时间为3600秒
3）. 通过设置的时间戳小于当前的时间戳来删除cookie变量，Eg:setcookie(“user”,”大鱼海”,time()-1)这样我们就删除了user这个cookie变量了。
4.path：cookie的有效范围。
1）该参数是下一个参数domain基础上的有效范围，如果path设置为”/”，那就是在整个domain都有效，Eg:setcookie(“user”,”大鱼海”,time()+3600,”/”),这样我们domain下的任何目录，任何文件都可以调用这个cookie变量的值。
2）如果path设置为”/test”,那么只在domain下的/test目录及子目录才有效，比如domain下有两个目录:test1,test2,我们设置为setcookie(“user”,”大鱼海,time()+3600,”/test1″)，那么只有test1目录下才能调用user这个cookie变量的值，test2目录下获取不到。
5.domain：cookie有效的域名，如果domain,设置为dayuhai.cn，那么在dayuhai.cn下的所有子域都有效。Eg:dayuhai.n有两个子域，java.dayuhai.cn，css.dayuhai.cn，我们设置为setcookie(“user”,”大鱼海”,time()+3600,”/”,”java.dayuhai.cn”),那么只有在java.dayuhai.cn这个子域下才能获取user这个cookie变量的值.
6.secure：设置cookie是否仅通过安全的https,值为0或1，如果值为1，则cookie只能在https连接上有效，默认值为0，表示cookei在http和https连接上都有效。
接下来，我们详细说明一下setCookie()函数里代码的意思。
d.setTime(d.getTime() + 2460601000days)：
- d. getTime(): 得到d这个时间点以毫秒为单位的时间（也就是说从1970年1月1日0点0分0秒到d这个时间点所经过的毫秒数，计算机一般设定1970年1月1日0点0分0秒是最初始时间）
2460601000days:24（一天24小时）*60（一小时60分钟）*60（一分钟60秒）*1000（一秒1000毫秒）*days得到的是days天对应的毫秒数。 - d.setTime(d.getTime() + 2460601000days) :相加得到过期日期对应的毫秒数，然后使用d.setTime()方法赋值到d这个对象中。
这里我们把cookie保存在1天
window.document.cookie = name + “=” + value + “;path=/;expires=” + d.toGMTString()
- d.toGMTString()：表示该日期会在转换为字符串之前由本地时区转换为 GMT 时区。
window.document.cookie = 表示给cookie赋值，赋是什么样值呢？在该域名的所有子域有效的，保存时间为1天的，格式为”name=value"的值。
我们再放一下前端JS代码，以便更好的讲解
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
15.设置完Cookie之后，页面将进行跳转，完成登录功能
总结：
1.ajax请求：通过ajax设置的参数，向后端发送数据，在对应的函数内完成校验，结果 返回给前端，实现反馈
2.设置Cookie:当登录校验完成，调用setCookie()方法，按照cookie相应的条件参数，进行设置
