在前面的密碼修改中,我們避開使用了前端素材中驗證舊密碼的Ajax功能,是因為要把Ajax單獨拿出來講
前面實現的密碼修改功能是直接輸入兩遍新密碼進行的修改,這顯然是不安全的,所以我們應該在修改密碼的時候加入驗證舊密碼的操作,而這個操作根據前端素材就需要使用到Ajax了
1.什么是Ajax
-
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)
-
AJAX 不是新的編程語言,而是一種使用現有標准的新方法
-
AJAX 是在不重新加載整個頁面的情況下,與服務器交換數據並更新部分網頁的藝術
- 通過在后台與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新
- 這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新
-
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面
2.怎么實現舊密碼驗證?
直接的做法就是去數據庫中查找,但是這樣的畫我們又要寫一條線:Dao開始-->service-->servlet-->JSP
我們可以采取一種很簡單的方式進行:在用戶登陸的時候我們將整個用戶對象都存儲到session中了,所以我們可以利用Ajax的異步請求+session中的user對象實現舊密碼的驗證
做法就是在后端復用的servlet中再定義一個方法,這個方法專門負責對比Ajax傳遞給后端的舊密碼是否和session中User對象的密碼一致,並通過對比的情況和結果來返回JSON數據給前端
3.編寫servlet
oldpassword.on("blur",function(){
$.ajax({
type:"GET",
url:path+"/jsp/user.do",//Ajax提交的URL,可見和我們修改密碼的JSP頁面的表單提交的URL一樣,所以我們應該復用servlet
data:{method:"pwdmodify",oldpassword:oldpassword.val()},//提交的參數
//上面兩句話等價於 = path+/jsp/user.do ? method=pwdmodify & oldpassword=oldpassword.val()
dataType:"json",
success:function(data){
if(data.result == "true"){//舊密碼正確
validateTip(oldpassword.next(),{"color":"green"},imgYes,true);
}else if(data.result == "false"){//舊密碼輸入不正確
validateTip(oldpassword.next(),{"color":"red"},imgNo + " 原密碼輸入不正確",false);
}else if(data.result == "sessionerror"){//當前用戶session過期,請重新登錄
validateTip(oldpassword.next(),{"color":"red"},imgNo + " 當前用戶session過期,請重新登錄",false);
}else if(data.result == "error"){//舊密碼輸入為空
validateTip(oldpassword.next(),{"color":"red"},imgNo + " 請輸入舊密碼",false);
}
},
error:function(data){
//請求出錯
validateTip(oldpassword.next(),{"color":"red"},imgNo + " 請求錯誤",false);
}
});
//2.驗證舊密碼
//直接與session中的user對象的密碼進行對比即可,不用再去查數據庫
public void pwdModify(HttpServletRequest req, HttpServletResponse resp){
Object user = req.getSession().getAttribute(Constants.USER_SESSION);
String oldpassword = req.getParameter("oldpassword");
//使用Map集合存儲返回給前端的數據
Map<String,String> resultMap = new HashMap<String, String>();
if (user==null){//session中的user對象失效了
resultMap.put("result","sessionerror");
}else if (StringUtils.isNullOrEmpty(oldpassword)){//輸入的密碼為空
resultMap.put("result","error");
}else {
String userPassword = ((User)user).getUserPassword();
if (userPassword.equals(oldpassword)){//輸入的密碼匹配
resultMap.put("result","true");
}else {//輸入的密碼不匹配
resultMap.put("result","false");
}
}
//將Map集合中的數據轉為JSON格式傳輸給前端
try {
resp.setContentType("application/JSON");//設置返回數據是一個JSON,這樣瀏覽器拿到這個數據之后就會按照JSON的數據格式來解析它
PrintWriter writer = resp.getWriter();//獲取輸出流
writer.write(JSONArray.toJSONString(resultMap));//使用阿里巴巴提供的一個JSON工具類,直接將其他數據格式的數據轉為JSON數據格式,然后直接將其寫出去
writer.flush();//刷新緩沖區
writer.close();//關閉資源
} catch (IOException e) {
e.printStackTrace();
}
}
4.測試