在用户登陆的时候,离开用户、密码输入框即进行验证:ajax发起请求进行验证的:
login.jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户登陆</title> </head> <body> <form action="#" method="post"> <input type="hidden" name="action" value="login"/> 用户名: <input type="text" maxlength="10" name="username" id="userid" onblur="validata('user')"> <span id="uservalidate" style="color:red"></span> <br><br> 密码: <input type="password" maxlength="10" name="password" id="passwordid" onblur="validata('password')"/> <span id="passvalidate" style="color:red"></span> <br><br> <input type="submit" value="登陆"/> <input type="reset" value="重置"/> </form> </body> <script type="text/javascript"> var request; var actionType; //onblur的时候,发起ajax请求验证用户/密码是否正确 function validata(type){ actionType = type; var url; if(window.XMLHttpRequest){ request = new XMLHttpRequest(); }else if(window.ActiveXObject){ request = new ActiveXObject("Microsoft.XMLHTTP"); } if(type=='user'){ actionType = 'usercheck'; var username = document.getElementById("userid").value; url = "validate.jsp?action=usercheck&username=" +username; request.open("GET", url, true); }else if(type=='password'){ actionType = 'passwordcheck'; var password = document.getElementById("passwordid").value; url = "validate.jsp?action=passwordcheck&password=" +password; request.open("POST", url, true); } request.onreadystatechange = callback; //当状态变化,调用callback方法 callback这里不能写参数,写了只调一次,为什么? request.send(null); //sends HTTP request;body can be null; } //ajax返回的处理函数 function callback(){ if(request.readyState == 4){ if(request.status == 200){ var msg = request.responseText; console.log(msg); if(actionType=='usercheck'){ if(msg == "wrong"){ document.getElementById("uservalidate").innerText = "用户名错误!"; }else if(msg == 'correct'){ document.getElementById("uservalidate").innerText = "用户名正确!"; } }else if(actionType=='passwordcheck'){ if(msg == "wrong"){ document.getElementById("passvalidate").innerText = "密码错误!"; }else if(msg == 'correct'){ document.getElementById("passvalidate").innerText = "密码正确!"; } } } } } </script> </html>
后台使用validate.jsp进行简单验证模拟:
<% /** setContentType常用参数: text/html HTML text/plain TXT text/xml XML text/javascript json数据 response.setContentType(“text/html;charset=UTF-8”); */ response.setContentType("text/plain;charset=utf-8"); response.setHeader("Cache-Control", "no-store"); //HTTP1.1 response.setHeader("Pragma", "no-cache"); //HTTP1.0 response.setDateHeader("Expires", 0); //prevents catching at proxy server String action = request.getParameter("action"); if(action!=null && action.equals("usercheck")){ String username = request.getParameter("username"); if(username!=null && !username.equals("admin")){ response.getWriter().write("wrong"); }else{ response.getWriter().write("correct"); } }else if(action!=null && action.equals("passwordcheck")){ String password = request.getParameter("password"); if(password!=null && !password.equals("admin")){ response.getWriter().write("wrong"); }else{ response.getWriter().write("correct"); } } %>
页面效果:
补充知识:
XMLHttpRequest的方法:
XMLHttpRequest的属性:
有更好的例子,或者用法继续补充》》》》》》》》》》》》》》》》》
注意:上面的validate.jsp我并没有写<%@ page contentType="text/html;charset=utf8" ... %>等这个头部信息,写了之后,发现response.getWriter().write("wrong")写到客户端,console一看总是"wrong"后面多个换行符,就始终不对;研究下为什么。
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
pageEncoding是jsp文件本身的编码
contentType的charset是指服务器发送给客户端时的内容编码
不同于常规 servlet (默认的 MIME 类型为 text/plain),JSP 页面的默认 MIME 类型是 text/html (默认字符集为 ISO-8859-1)。因此,如果 JSP 页曲以 Latin 字符集输出 HTML则根本无需使用 contentType