使用Ajax和JSON实现注册时候验证用户名是否存在的功能

<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>用户名：</th>
<td>
<input type="text" id="userName" name="userName" onblur="checkUserName()"/>
<font id="img"></font>
</td>
</tr>
<tr>
<td>密码：</th>
<td><input type="password" id="password1" name="password1"/></td>
</tr>
<tr>
<td>确认密码：</th>
<td><input type="password" id="password2" name="password2"/></td>
</tr>
<tr>
<td><input type="submit" id="sb" value="注册"/></td>
<td><input type="button" id="button" value="重置密码" onclick="czmima()"/></td>
</tr>
</table>

<script type="text/javascript">
//简单的实现用户名和密码重置的功能
function czmima(){
document.getElementById("password1").value="";
document.getElementById("password2").value="";
document.getElementById("userName").value="";
}
function checkUserName() {
var userName = document.getElementById("userName").value;
//创建XMLHttpRequest对象
var xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//XMLHttpRequest对象请求后台服务
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var dataObject = eval("("+xmlHttp.responseText+")");
if(dataObject.exist){
//如果用户名存在，就会在文本框的后边显示一个X的图标，表示这个用户名称不可用
document.getElementById("img").innerHTML="<img src='no.png'/>&nbsp;该用户名称已经存在！";
}else{
//如果用户名存在，就会在文本框的后边显示一个“对号”的图标，表示这个用户名称可用
document.getElementById("img").innerHTML="<img src='ok.png'/>&nbsp;该用户名称可以使用！";
}
}
}
//规定请求类型、请求处理的地址以及是否使用异步请求处理。
//这里还需要把用户输入的用户名作为参数传给后台servlet用以判断
xmlHttp.open("get","checkUserNameServlet?userName="+userName,true);
//将请求发送给服务器进行处理
xmlHttp.send();
}
</script>

package com.java1234.web; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; public class CheckUserNameServlet extends HttpServlet { /**
*
*/
private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置浏览器接收到请求是需要知道的处理格式（MIME）
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//创建一个JSONObject对象，用于封装处理结果
JSONObject reslutJSon = new JSONObject();
//接收从前端传来的userName的参数
String userName = request.getParameter("userName");
//这里就是直接让前端传入的参数和一个字符串进行比较
if("Marry".equals(userName)) {
reslutJSon.put("exist", true);
}else {
reslutJSon.put("exist", false);
}
out.println(reslutJSon);
out.flush();
out.close();
} }