index010_js & index010_jquery的body代码中都写入:
<form action="validate" method="post">
<table align="center" width="500px" frame="box" rules="rows">
<tr><td>用户名</td><td><input type="text" size="20" name="username"><font id="mess" color="red"></font></td></tr>
<tr><td>邮箱号:</td><td><input type="text" size="20" name="email"></td></tr>
<tr><td colspan="2"><input type="submit" value="登录"></td></tr>
</table>
</form>
controller包下公用的servlet文件ValidateServlet.java
package Controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ValidateServlet
*/
@WebServlet("/validate")
public class ValidateServlet extends HttpServlet {
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username=request.getParameter("username");
if(username.equals("admin")) {
response.getWriter().print("0");//失败
}else {
response.getWriter().print("1");//成功
}
}
}
index010_js.jsp
<script>
var xhr;
function checkUsers(t){
var username=t.value;
//1.获取XMLHttpRequest
xhr=getRequest();
//2.设置请求方式
xhr.open("post","validate");
//3.指定回调函数
xhr.onreadystatechange=doResult;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send("username="+username);
}
//回调函数
function doResult(){
if(xhr.status==200){
var res=xhr.responseText;//获取响应结果
var mess=document.getElementById("mess");//获取相应结果后,找到id为mess放值
if(res=='1'){
mess.innerHTML="用户名可以使用!";
}else{
mess.innerHTML="用户名已存在!";
}
}
}
function getRequest() {
if (window.XMLHttpRequest) {
//在IE7及非IE浏览器中
xmlhttp = new XMLHttpRequest();
} else {
try {
//在较新的IE版本中
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//这是在IE7以前的版本中
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("对不起,您的浏览器不支持xmlHttpRequest对象");
}
}
}
return xmlhttp;
}
</script>
index010_jquery.jsp写入:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$("[name=username]").blur(function(){
$.ajax({
url:"validate",
data:{"username":$(this).val()},
type:"post",
dataType:"text",
success:function(result){
if(result=="1"){
$("#mess").html("用户名可用");
}else{
$("#mess").html("用户名不可用");
}
},
error:function(result){
alert(result);
}
});
});
</script>