前端AJAX异步交互：实现用户名实时验证-优快云博客

本文链接：https://blog.youkuaiyun.com/boyas/article/details/124262536

前端技术之Ajax

同步交互

首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML在浏览器中显示，通常会有CSS样式丰富页面的显示效果。

异步交互

所谓异步交互是指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待。在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。异步不用等所有操作等做完，就响应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

AJAX

在这里插入图片描述
Ajax最大的特点:异步访问，局部刷新。

异步验证用户名占用问题

在页面上持续操作过程中，发送了一次请求，这时后台服务器进行运算，运算完后，结果响应给浏览器。在浏览器上在当前页面上无需跳转页面，可以继续其它操作的同时，响应回来的信息可以展示到页面上。

@WebServlet("/unameCheckServlet.do")
public class UnameCheckServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uname = req.getParameter("uname");
        String info = "";
        System.out.println(uname);
        if ("msb".equals(uname)){
            info="用户名已经占用";
        }else {
            info="用户名可用";
        }
        //向浏览器响应数据
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().print(info);
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        var xhr;

        function checkUname() {
            //获取输入框中的内容
            var unameDOM = document.getElementById("unameI");
            var unameText = unameDOM.value;
            var unameInfoDom = document.getElementById("unameInfo");
            if (null == unameText || unameText == '') {
                unameInfoDom.innerText = "用户名不能为空";
                return;
            }
            unameInfoDom.innerText = "";
            //发送异步请求
            //获取一个XMLHttpRequest对象，对象可以帮助我们发送异步请求
            xhr = new XMLHttpRequest();
            //使用xhr对象设置打开链接，设置请求方式和参数xhr.open("请求方式","请求的url",是否使用异步方式)
            xhr.open("GET", "unameCheckServlet.do?uname=" + unameText, true);
            //设置回调函数
            xhr.onreadystatechange = showReturnInfo;
            //正式发送请求
            xhr.send(null);
        }

        function showReturnInfo() {
            if (xhr.readyState == 4 && xhr.status == 200) {
              var returnInfo = xhr.responseText;
              var unameInfoDom = document.getElementById("unameInfo");
              unameInfoDom.innerText = returnInfo;
            }
        }
    </script>
</head>
<body>
<form action="myServlet1.do">
    用户名：<input id="unameI" type="text" name="uname" onblur="checkUname()"><span id="unameInfo" style="color: red"></span><br/>
    密码：<input type="text" name="pwd"><br/>
    <input type="submit">
</form>
</body>
</html>

<html>
<head>
    <title>$Title$</title>
    <meta charset="UTF-8"/>
    <script src="js/jquery.min.js"></script>
    <script>

        function checkUname() {
            //获取输入框中的内容
            if (null == $("#unameI".valueOf()) || $("#unameI").valueOf() == '') {
                $("#unameInfo").text("用户名不能为空");
                return;
            }
            $("#unameInfo").text("");
            //通过jQuery.ajax()发送异步请求
            // $.ajax({属性名:属性值,属性名:属性值,方法名:方法})
            $.ajax(
                    {
                        type:"GET",
                        url:"unameCheckServlet.do?",
                        data:"uname="+$("#unameI").val(),
                        success:function (info){
                            $("#unameInfo").text(info)
                        },
                        error:function() {
                            alert("失败响应")
                        }
                    }
                )
        }

    </script>
</head>
<body>
<form action="myServlet1.do">
    用户名：<input id="unameI" type="text" name="uname" onblur="checkUname()">
    <span id="unameInfo" style="color: red"></span><br/>
    密码：<input type="text" name="pwd"><br/>
    <input type="submit">
</form>
</body>
</html>