使用Ajax验证用户名是否存在

现在很多的网站，多支持用户名不能重复的功能，即在用户注册时需要验证，验证其用户名不能重复使用，这样用户名其实也成为了唯一的主键，方便了项目后面许许多多的开发。
步骤：

1. 编写jsp页面

<div >
<input type="text"  placeholder="用户名"  name="name" onblur="checkName(this.value)" /> 
<span id="nameTip" style="color: red;"></span>
</div>

2.编写servlet查询数据库是否存在相同用户名

package cn.com.mp.back.servlet;

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;

import cn.com.mp.utils.DbUtil;

@WebServlet("/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public CheckUserNameServlet() {
        super();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        DbUtil db=new DbUtil();

        //得到请求参数
        String name=request.getParameter("name").toString();
        System.out.println(name+"CheckUserNameServlet");

        //查询数据库
        String sql="select count(*) as size from users where name=?";
        int result=Integer.parseInt(db.query(sql, new Object[]{name}).get(0).get("size").toString());
        if(result>0){
            response.getWriter().print("1");
        }else{
            response.getWriter().print("0");
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

3.编写JavaScript实现ajax
由response得到ajax数据有两种形式：

• xml形式：
  servlet中response输出的方式不同，以键值对的形式将数据封装，得到的方式为xmlHttp.responseXML
• text形式
  servlet中直接以response.getWriter().print(“”)输出，得到的方式为xmlHttp.responseText

<script type="text/javascript">
    //封装生成xmlHttp对象
    var xmlHttp;
    function getXMLHttpRequest() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();

        } else {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //Ajax得到用户名
    function checkName(name) {
        //1.生成xmlHttp对象
        xmlHttp = getXMLHttpRequest();
        //2.设置请求参数（method,url,async）
        xmlHttp.open("Get", "../../CheckUserNameServlet?name="+name, true);
        //3.监听服务器返回的数据
        xmlHttp.onreadystatechange = checkNameCallBack;
        //4.发送请求
        xmlHttp.send();

    }
    //3.编写验证用户名的回调函数
    function checkNameCallBack() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            //接收服务器返回的数据
            var text = xmlHttp.responseText;
            if("0"!=text){
                document.getElementById("nameTip").innerText="用户名已存在，请重新输入";
            }else{
                document.getElementById("nameTip").innerText="";
            }
        }

    }
</script>

4.结果


使用封装提示信息。

以上为笔者学习记录，若有不正确之处，还请指教！