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

最新推荐文章于 2020-05-30 13:40:48 发布

【Ceiauq

最新推荐文章于 2020-05-30 13:40:48 发布

阅读量619

点赞数 1

分类专栏： ajax 文章标签： Ajax 验证用户名

本文链接：https://blog.csdn.net/chaseqrr/article/details/103734123

版权

ajax 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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

}

效果图如下：

【Ceiauq

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax校验用户名是否存在

使用Ajax校验用户名通常情况下在一个系统中的用户的登录名是唯一的，为了保证用户名的唯一性，需要在用户注册时添加校验，即根据用户输入的用户名去数据库中查找，这里使用ajax校验用户名可以很好的提升用户体验，用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一，然后根据结果给用户相应的提示信息，这样对于用户来说非常方便。什么是回调函数回调函数就是你编写好了一个函数，让软件系统来...
复制链接

扫一扫