Ajax判断用户名是否可用

最新推荐文章于 2022-08-10 16:44:38 发布

AloneDrifters

最新推荐文章于 2022-08-10 16:44:38 发布

阅读量257

点赞数 1

分类专栏： JavaWeb 文章标签： ajax

本文链接：https://blog.csdn.net/qq_53609683/article/details/116536908

版权

JavaWeb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Ajax的简介

01展示效果并认识Ajax
方案1：传统方案
提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的是整个注册页面。
缺点：较大的网络流量，用户体验不好
方案2：使用Ajax方案。
用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；
优点：较小的网络流量，用户体验好

理解示意图

在这里插入图片描述

实现步骤

给用户名文本框绑定onblur事件
开发服务器端判断用户的是否可用功能
使用Ajax完成功能
创建XMLHttpRequest对象
建立到服务器的连接
设置服务器在完成后要运行的回调函数
发送请求

代码实现

save.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>注册页面</title>
    <script type="text/javascript">
        var   xhr;
        function  checkNC() {
            var nc = document.getElementById("nc").value;
            if(nc==null||nc==''){
              document.getElementById("nc_span").innerText="用户名不能为空";
            }else {
                //发送ajax请求
                  //[1]创建XMLHttpRequest对象
                  xhr=new XMLHttpRequest();
                  //[2]和服务器建立连接
                 //xhr.open(method,url,acy,username,passward);
                  xhr.open("get","RegisterServlet?nc="+nc,true);
                  //[3]执行回调函数
                 xhr.onreadystatechange=process;
                  //[4]发送请求数据
                 xhr.send(null);
            }
        }
        function  process() {
              //接受ajax 的响应内容
             var   text= xhr.responseText;
             //把响应回的内容放到span中
            document.getElementById("nc_span").innerText=text;
        }
    </script>
</head>
<body>
  <h3>用户注册</h3>
<form>
    <p>
        昵称:<input type="text" name="nc" id="nc" onblur="checkNC()"/>
        <span id="nc_span"></span>
    </p>
    <p>
        真是姓名:<input type="text" name="uname"/>
    </p>
    <p>
        密码:<input type="text" name="pwd"/>
    </p>
    <p>
        描述:<input type="text" name="desc"/>
    </p>
    <p>
        <input type="submit" value="注册"/>
    </p>

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

RegisterServlet.java

@WebServlet("/RegisterServlet")
public class RegisterServlet  extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         resp.setContentType("text/html;charset=utf-8");
        //[1]接受页面的数据
        String nc = req.getParameter("nc");

        System.out.println("昵称:"+nc);
        //[2]数据的处理-->返回结果
        boolean   flag=false;
        if("sxt".equals(nc)){
            flag=true;
        }
        //[3]根据返回结果做出响应
        PrintWriter out = resp.getWriter();
        if(flag){
            //证明用户名在数据库存在-->用户不可使用
            out.print("用户名占用");
        }else{
            //证明用户名子啊数据库不存在-->用户名可用
           out.print("用户名可用");
        }
    }
}

ajax内容总结

A、如何创建XHR对象

 if(window.ActiveXObject){//IE
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else {//其他浏览器
           xhr=new XMLHttpRequest();
   }

B、和服务器建立连接

  GET：
    xhr.open("get","SaveServlet?uname="+val,true);
    xhr.send(null);
  POST：
   xhr.open("post","SaveServlet",true);
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
   xhr.send("uname="+val)

C、后台如何接受数据

 String uname = req.getParameter("uname");

D、后台如何给前台做出响应

 out.print("用户名占用");

E、前台如何接受响应的数据？

    var  text= xhr.responseText;

F、

 xhr.readyState  0  1 2  3  4

 xhr.status  200   404   500 ..


 局部刷新   异步提交

AloneDrifters

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ajax判断用户名是否可用

实现步骤给用户名文本框绑定onblur事件开发服务器端判断用户的是否可用功能使用Ajax完成功能创建XMLHttpRequest对象建立到服务器的连接设置服务器在完成后要运行的回调函数发送请求代码实现save.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <base href="<%=request.getCont
复制链接

扫一扫