用Ajax实现用户名的校验

java的验证类

 public class UserDao {

     public boolean checkUserName(String name) {      //这里的name是网页上用户输入的用户名

         Connection conn = JdbcUtil.getConnection();  //实现和和数据库的连接，这个方法这里没有写，只要知道这是用来连接数据库的

         PreparedStatement ps = null;

         ResultSet rs = null;

         boolean flag = false;

         String sql = "select * from ajaxuser  where username=?";

         try {

             ps = conn.prepareStatement(sql);

             ps.setString(1, name);

             rs = ps.executeQuery();

             if (rs.next()) {       //如果数据库中有下一个，那就说明数据库中已经有相同的用户名了，那就返回true

                 flag = true;

             }

         } catch (SQLException e) {

             e.printStackTrace();

         }

         return flag;              //没有重名返回false

     }

 }

MyServlet类主要通过Ajax是得到网页上的用户名，在把用户名放入到上面的方法中，在把得到的结果返回到界面

 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

         response.setContentType("text/xml;charset=UTF-8"); //采用XML输出

         PrintWriter out =response.getWriter();            //同样是write写出

         String username=request.getParameter("username"); //得到表单输入的用户名

          UserDao dao=new UserDao();

         boolean flag =dao.checkUserName(username);        //把表单中输入的用户名和数据库中进行核对

         StringBuilder sb =new StringBuilder();          //因为是输出为xml格式，所以要输出下面这种格式

         //<response><a>0</a></response>      <response><a>1</a></response>

         sb.append("<response>");

         sb.append("<a>");

         if(flag){

             sb.append("1");  //说明如果存在在自定义标签a中value值为1

         }else{

             sb.append("0");  //没有为0

         }

         sb.append("</a>");

         sb.append("</response>");

         String xml=sb.toString();   //完成拼接后转为String类型

          out.write(xml);            //再把这一整个xml格式输出

         out.flush();                //立即执行

         out.close();

 }

Jsp界面是用来显示在客户端

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

   <html>

   <script type="text/javascript">

      var XMLHttpReq;

     function createXMLHttpRequest() {    //这是固定膜拜，因为浏览器有很多种所以判断，这个方法是得到XMLHttpRequest对象

         if (window.XMLHttpRequest) {

              XMLHttpReq = new XMLHttpRequest();

          } else if (window.ActiveXObject()) {

              try {

                 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

             } catch (e) {

                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

              }

          }

      }

     function back(){

    alert(XMLHttpReq.readyState);

         if(XMLHttpReq.readyState==4){  //判断对象状态是否完成

             if(XMLHttpReq.status==200){

           //这里相当于得到servlet输出的<response><a>0</a></response>这个标签

                  var xmlData=XMLHttpReq.responseXML;

                  var un=document.getElementById("un");

           //得到a标签的第一个子标签，也就是文本标签的value值

                 var flag =xmlData.getElementsByTagName("a")[0].firstChild.nodeValue;    //就是得到0或者1

                   if(flag==1){

                     un.innerHTML="该邮箱已被注册,请重新输入...."; //这就是span的作用了，用来回显

                   }else if(flag==0){

                    un.innerHTML="恭喜该邮箱可以使用..";

                  }}    }}

     function checkUserName(){

      var username=document.getElementById("username").value;  //得到客户端输入的name

      var url="MyServlet?username="+username;

       createXMLHttpRequest();

      1 XMLHttpReq.onreadystatechange=back;  //这里back可以没有括号也可以有，每当change改变一次都会调用back方法

      XMLHttpReq.open("GET",url,true);

         XMLHttpReq.send(null);              //上面的back方法就已经执行了，其实是没有多大区别，这主要是readyState方法的特点，每一次值改变都会触发onreadystate                          change方法，放在上面和下面唯一区别就是放在下面back方法多执行一次，但也没有关系，因为back方法了只有一个判断，只有最后一次readyState=4时，
                                                 才为true，所以没有关系具体的自己理解

     }

  </script>

  <body>

     <form action="" >    //这里可以不写因为上面url写了

        用户名:<input type="text" name="username" id="username" onblur="checkUserName()"><span id ="un"></span><br/>   //这里的span标签主要是用来回显                              用的很机智

        密码:<input type="password" name="password" ><br/>

       <input type="submit" value="注册">

   </form>

      </body>

    </html>

 总结：这个以后应该会经常用到，没什么技术难点，自己多看多理解

案例1.用Ajax实现用户名的校验的更多相关文章

  1. SSH网上商城---使用ajax完成用户名是否存在异步校验

    小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她 ...

  2. 使用ajax验证用户名重复

    继上次的用户注册登录案例之后,对其中的部分功能再做进一步改进.上一版中用户提交表单后才对用户名进行校验,虽然做了回显,但还是感觉功能弱了些.为了能有更好用户体验,不是在用户提交表单后才给提示,而是在用 ...

  3. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  4. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  5. asp.net ajax 检测用户名是否可用代码

    原文  asp.net ajax 检测用户名是否可用代码 .net ajax 检测用户名是否可用代码 <script type="text/网页特效" src="c ...

  6. asp.net ajax检查用户名是否存在代码

    原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...

  7. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  8. Ajax检测用户名是否已经注册

    程序功能 当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册! 实现过程 利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用.这里只是为了演示Aj ...

  9. Ajax验证用户名是否被注册

    Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...

随机推荐

  1. ng-repeat 嵌套访问父作用域里的属性

    在一个项目中,需要嵌套循环输出一个二维表的里的数据 数据结构 [ { id:1, list:[ { id:1, name:'li' } ] }, { id:2, list:[ { id:1, name ...

  2. ubuntu 搞坏了sudoers文件之修复方案

    pkexec visudo askubuntu原回答摘抄如下 On a modern Ubuntu system (and many other GNU/Linux distributions), f ...

  3. Unity 官网教程 -- Multiplayer Networking

    教程网址:https://unity3d.com/cn/learn/tutorials/topics/multiplayer-networking/introduction-simple-multip ...

  4. spring mvc 中文参数乱码

    最近做项目,springmvc的url中文参数乱码: 请求url: http://localhost:8080/supply/supply_list.htm?productName=测试&is ...

  5. RIDE -- Robot Framework setup

    RobotFramework 是一款基于python 的可以实现关键字驱动和数据驱动并能够生成比较漂亮的测试报告的一款测试框架 这里使用的环境是 python-2.7.10.amd64.msi RID ...

  6. 记录SQL Server2008日志文件损坏的恢复过程

    记录SQL Server2008日志文件损坏的恢复过程: 环境: 系 统:Windows Server2003 数据库:SQL Server2008 故障原因: 通过mstsc链接同一服务器时,用户界 ...

  7. js_闭包

    先从闭包特点解释,应该更好理解.闭包的两个特点:1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区.其实上面两点可以合成一点,就 ...

  8. ABAP 常见查询问题解决方法

    在ABAP 编程的时候会遇到查询单条语句的时候数能取对  但是条目数多了的话 会出现数不准确的问题   原因可能出现在查询使用了二分法查询方式  二分法查询下必须按排序的字段排序  还得按照排序的字段 ...

  9. Oracle基础知识（一）、简介与安装

    文章提纲 Oracle简介与发展历程 安装实例(面向普通开发者) 一.Oracle简介与发展历程 中文名称甲骨文公司,全称为甲骨文股份有限公司(甲骨文软件系统有限公司).甲骨文已超越 IBM ,成为继 ...

  10. POJ 2352 Stars 线段树

    题目链接 题意:在一个二维平面上有n个星星,每个星星的等级为x,x为该星星左方和下方所包含的星星的数量(包含正左和正下的),输出每个等级各有多少星星,星星坐标按照y序递增给出,y值相同按照x递增给出. ...