AJAX-用户名有效性验证

最新推荐文章于 2022-03-07 09:57:27 发布

jacoputh

最新推荐文章于 2022-03-07 09:57:27 发布

阅读量198

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/m0_59717047/article/details/121151636

版权

该博客介绍了如何使用AJAX进行异步请求，实现在前端JSP页面上进行用户名有效性验证。通过判断浏览器类型，选择GET或POST方法，设置防止乱码的头信息，并在Servlet中处理请求，返回账户注册状态。

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

AJAX-用户名有效性验证

1.我们先导包，把要用到的文件导入
2.建立一个前端的JSP页面
3.通过AJAX发送异步请求（同一个JSP页面设置）

因为考虑到不同的浏览器对页面的解析存在差异，所以我们要先去判断浏览器的类型是否为IE类型（具体概念查询博客搜索）
Get和Post方法都有使用，也有比较方法


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script type="text/javascript">
   //写出onblour的test  测试方法  格式如下
    function test() {
      //发送异步请求
      //1.创建XMLHttpRequest对象
      var xmlhttp;
      if(window.XMLHttpRequest){
        //非IE
        xmlhttp=new XMLHttpRequest();
      }else if(window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

      //2.打开链接
      var uname= document.getElementById("username").value; //获取前端输入值内容
      
      //xmlhttp.open("get","/testuname?username="+uname,true); // get方法
      xmlhttp.open("post","/testuname",true);  // true必须加入 否则没有意义   post方法   post虽然相比get复杂但是安全系数较高

      //3.指定回调函数  function里的方法是在匿名内部类里的，其实是在你想send之后收到结果之后才会运行。但是需要你在send之前规定好
      xmlhttp.onreadystatechange=function(){
        //3.1 判断状态
        if(xmlhttp.readyState==4){ //200 表示有传输数据
          //3.2 接收返回的数据
          var responseText = xmlhttp.responseText;
          document.getElementById("rs").innerText=responseText;
        }
      }

      //4.发送数据
      //xmlhttp.send();
      //post
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");//防止乱码
      xmlhttp.send("username="+uname);

    }

  </script>
  <body>
    用户名:<input type="text" id="username" onblur="test()">
          <span id="rs"></span><br>
  </body>
</html>

4.Servlet页面

@WebServlet(urlPatterns = "/testuname")
public class servelet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.接收参数
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter(); //声明writer方法

        if("admin".equals(username)){
            writer.println("账户已被注册"); //用writer方法反馈给前端
        }else{
            writer.println("账户可用");
        }
    }
    }