原始ajax发起请求并反馈
在用户登陆的时候，离开用户、密码输入框即进行验证：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
