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

布满荆棘的人生 2023-06-25 08:22 19阅读 0赞

### 使用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);
    	}
    
    }

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYXNlcXJy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYXNlcXJy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019122716315753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYXNlcXJy,size_16,color_FFFFFF,t_70