用ajax异步交互进行注册信息的校验

最新推荐文章于 2019-08-16 17:41:26 发布

老米的世界

最新推荐文章于 2019-08-16 17:41:26 发布

阅读量506

点赞数

分类专栏： jquery 文章标签： ajax 异步 web编程

本文链接：https://blog.csdn.net/MPFLY/article/details/71155465

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用原生的ajax进行校验

js代码:
写在一个ajax.js文件里,然后在jsp页面中引入即可.

function getXHR()
{
    var xmlHttp;

     try
        {
       // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
     catch (e)
        {

      // Internet Explorer
       try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
       catch (e)
          {

          try
             {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
          catch (e)
             {
             alert("您的浏览器不支持AJAX！");
             return false;
             }
          }
        }

     return xmlHttp;

}

js中的业务:

window.onload = function() {

    document.getElementById("id1").onblur = function() {
        if (this.value == "") {
            alert("限16个字符，支持中英文、数字、减号或下划线");
//          this.focus();// 恢复焦点
            return;
        }
    document.getElementById("id2").onblur = function(){ 
        if (this.value == "") {
            alert("限6-20 位/字母/数字/字符");
//          this.focus();// 恢复焦点
            return;
    }
        // 发出异步请求
        var xhr = getXHR();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {

                    document.getElementById("msg").innerHTML = xhr.responseText;
                    document.getElementById("msg2").innerHTML = xhr.responseText;
                    document.getElementById("msg3").innerHTML = xhr.responseText;

                }
            }
        }
        xhr.open("POST","AjaxServlet",true);
        // 设置请求消息头：告知客户端提交的正文的MIME类型(固定的)
        xhr.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");
        xhr.send("user=" + this.value);
    }
}

jsp中的代码

  <body>
    <form action="" method="">
      <table align="center">
         <tr><td>用户名：</td><td><input type="text" name="useruser" id="id1"><span id="msg"></td></tr>
         <tr><td>真实姓名：</td><td><input type="text" name="realuser" ></td></tr>
         <tr><td>密码：</td><td><input type="password" name="pwd" id="id2"><span id="msg2"></td></tr>
         <tr><td>确认密码：</td><td><input type="password" name="conf_pwd" id="id3"><span id="msg3"></td></tr>
         <tr><td><input type="submit" value="登录"></td><td><input type="reset" value="重置"></td></tr>
        </table>    
    </form>
  </body>
</html>

别忘了在头上加上一句:

<script type="text/javascript" src="js/ajax.js"></script>

最后是Servlet代码:

package com.hello.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("utf-8");
        //接收发过来的user数据
        String name = request.getParameter("user");
        //定义用户名的正则表达式,用以验证用户名是否合法
        String regStr = "^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{1,16}$";
        //判断
        if (name.matches(regStr)) {
            response.getWriter().write("<font color='green'>合法</font>");
        } else {
            response.getWriter().write("<font color='red'>限16个字符，支持中英文、数字、减号或下划线</font>");
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}