Ajax技术_微笑伴你而行csdn-CSDN博客

本文链接：https://blog.csdn.net/qq_52108058/article/details/125055390

本文展示了如何使用Ajax与Servlet实现一个简单的用户注册功能，通过Ajax异步查询，当用户在输入框失去焦点时，实时检查用户名是否已被注册。如果用户名为空则提示不能为空，如果在数据库中已存在，则提示已被注册，否则提示用户名可用。

摘要由CSDN通过智能技术生成

文章目录

一、案例演示
二、实现步骤
- 1.add.jsp
- 2.checkNameServlet

一、案例演示

不输入用户名时，提示用户名不为空，输入数据库不存在用户名时，提示用户名可用，相反，已经被注册
在这里插入图片描述

二、实现步骤

1.add.jsp

登入页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script type="text/javascript">
        var xhr;
        function checkName(){
            //获取用户名的值
            var val=document.getElementById("username").value;
            //为空的时候提示不为空
            if(val==""||val==null){
                document.getElementById("name_span").innerText="X 用户名不能为空!";
            }else {
                //发送Ajax请求
                //1.创建XMLHttpRequest对象
                xhr=new XMLHttpRequest();
                //2.和服务器创建连接
                xhr.open("get","checkNameServlet?name="+val,true);
                //3.设置回调函数
                xhr.onreadystatechange=process;
                //4.发送请求
                xhr.send(null);
            }
        }
        function  process(){
            //请求已完成
            //正常服务器响应成功
            if(xhr.readyState==4 && xhr.status==200){
                var text =xhr.responseText;
                document.getElementById("name_span").innerText=text;
            }
        }
    </script>
</head>
<body>
<form action="">
    <h3>用户注册</h3>
    <p>
        用户名：<input type="text" name="username" id="username" onblur="checkName()">
        <span id="name_span"></span>
    </p>
    <p>
        密码：<input type="text" name="password" id="password">
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="submit" value="重置">
    </p>


</form>
</body>
</html>

2.checkNameServlet

信息处理页面

@WebServlet(name = "checkNameServlet", value = "/learn/chap6/checkNameServlet")
public class checkNameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        PrintWriter out=response.getWriter();
        //已经注册的用户名
        String[] userList={"www","weihai","威海","lu","fei"};
        //获取输入的用户名
        String user =request.getParameter("name");
        //对一个数组的所有元素进行排序，并且是按从小到大的顺序
        Arrays.sort(userList);
        //二分查找user
        int result=Arrays.binarySearch(userList,user);
        //如果数组中存在该元素result>-1，不存在result<-1
        if(result>-1){
            out.println("很抱歉，该用户名已经被注册!");
        }else {
            out.println("恭喜您，该用户名可用");
        }
    }
}