使用Ajax校验用户名
通常情况下在一个系统中的用户的登录名是唯一的，为了保证用户名的唯一性，需要在用户注册时添加校验，即根据用户输入的用户名去数据库中查找，这里使用ajax校验用户名可以很好的提升用户体验，用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一，然后根据结果给用户相应的提示信息，这样对于用户来说非常方便。
什么是回调函数
回调函数就是你编写好了一个函数，让软件系统来调用这个函数，该函数就是回调函数。说的简单点其实就是让系统调用你的函数就是回调，那你调用系统的函数是直调。
举例来说，你跟马云谈生意，聊天结束后，你跟马云说以后有什么需要帮助的可以联系我的秘书小张。这个秘书小张就可以看做是回调函数，当马云联系你的秘书小张时，叫做调用回调函数。
通常我们在网页上注册登录时，刚填好用户名跳到下一行时突然提示你的用户名已被注册，也不需要刷新网页，这个功能的实现就是靠Ajax技术实现的，具体实现如下。
JS部分（MyAjax.js)
//获取XMLHttpRequest对象
function getXMLHttpRequest(){
var xmlHttp;
//IE7+,FireFox,Chrome,Opera,Safari
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{//ie6,ie5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}JSP部分
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证用户</title>
</head>
<body>
<form action="">
用户名：<input type="text" name="username" id="username"/><span id="msg"></span><br/>
</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/MyAjax.js"></script>
<script type="text/javascript">
window.onload=function(){
var nameElement = document.getElementById("username");
//绑定onblur事件（即鼠标焦点离开输入框所触发的事件）
nameElement.onblur = function(){
//this等价于nameElement
var name = this.value;
//创建XMLHttpRequest对象
var xhr;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//注册回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4){//请求一切正常
if(xhr.status==200){//服务器响应一切正常
var msg = document.getElementById("msg");
if(xhr.responseText=="true"){
msg.innerHTML = "<font color='red'>用户名已存在</font>";
}else{
msg.innerHTML = "可以使用";
}
}
}
}
//创建连接
xhr.open("get","${pageContext.request.contextPath }/regist?name="+name);
//发送请求
xhr.send(null);
}
}
</script>
</html>Servlet部分
package com.rong.servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 RegistServlet
*/
@WebServlet("/regist")
public class RegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
if("123".equals(name)){
out.print(true);
}else{
out.print(false);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
效果图如下：
