ajax原生

 

 

实现步骤

给用户名文本框绑定onblur事件

开发服务器端判断用户的是否可用功能

使用Ajax完成功能

创建XMLHttpRequest对象

建立到服务器的连接

设置服务器在完成后要运行的回调函数

发送请求

代码实现

 

 

 

<%@ 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>

 

 

@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("用户名可用");
        }
    }
}
posted @ 2021-01-15 11:05  巧克力曲奇  阅读(60)  评论(0)  编辑  收藏  举报