Ajax使用原生态JS实现用户名是否存在验证

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chance2015/article/details/52468842

直接上代码:
reg_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求servlet实现用户名是否存在验证</title>
</head>
<body>

    <script type="text/javascript">

        /** 
         * 得到XMLHttpRequest对象 
         */
        function getajaxHttp() {
            var xmlHttp;
            try {
                // Firefox, Opera 8.0+, Safari  
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                // Internet Explorer  
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        alert("您的浏览器不支持AJAX!");
                        return false;
                    }
                }
            }
            return xmlHttp;
        }
        /** 
         * 发送ajax请求 
         * url--请求到服务器的URL 
         * methodtype(post/get) 
         * con (true(异步)|false(同步)) 
         * functionName(回调方法名,不需要引号,这里只有成功的时候才调用) 
         * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象) 
         */
        function ajaxrequest(url, methodtype, con, functionName) {
            //获取XMLHTTPRequest对象
            var xmlhttp = getajaxHttp();
            //设置回调函数(响应的时候调用的函数)
            xmlhttp.onreadystatechange = function() {
                //这个函数中的代码在什么时候被XMLHTTPRequest对象调用?
                //当服务器响应时,XMLHTTPRequest对象会自动调用该回调方法
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        functionName(xmlhttp.responseText);
                    }
                }
            };
            //创建请求
            xmlhttp.open(methodtype, url, con);
            //发送请求
            xmlhttp.send();
        }
        function checkUsername() {
            var username=document.getElementById('username').value;
            //调用ajax请求Servlet
            ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
        }
        function ckUsernameResponse(responseContents){
            if (responseContents=='yes') {
                document.getElementById('usernameMsg').innerHTML="<font color='red'>用户名存在</font>";
                document.getElementById('username').style="background-color: red";
            }else{
                document.getElementById('usernameMsg').innerHTML="";
                document.getElementById('username').style="background-color: white";
            }
        }

    </script>

    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" id="username" onblur="checkUsername()"/></td>
            <td><div id="usernameMsg"></div></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" id="email" /></td>
            <td><div id="emailMsg"></div></td>
        </tr>
    </table>


</body>
</html>

请求的Servlet代码如下;
UserServlet.java

package cn.bestchance.servlet;

import java.io.IOException;
import java.util.ArrayList;

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 UserServlet
 */
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;


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

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username=request.getParameter("username");
        //这里使用ArrayList代替从数据库中查询数据
        ArrayList<String> userList =new ArrayList<String>();
        userList.add("admin");
        userList.add("test");
        userList.add("chance");
        //验证用户名是否存在
        boolean flag = false;
        for (String string : userList) {
            if(string.equals(username)){
                flag = true;
                break;
            }
        }
        if(flag){//用户名已存在
            response.getWriter().print("yes");
        }else{//用户名不存在
            response.getWriter().print("no");
        }
    }

}
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页