今天复习了一下  Ajax异步验证用户名是否存在，在下面我写三种，一般开发时候都用第三种 jQuery和Ajax结合的形式，下面就介绍三种，具体说明代码里就有啦，废话不多说，直接上代码：

第一种方式：用基础语法js实现 get请求：

  1.  //封装了获取XMLHttpRequest对象的方法
  2.  function getXMLHttpRequest() {
  3.      var xmlhttp;
  4.      if (window.XMLHttpRequest) {// code for all new browsers
  5.          xmlhttp = new XMLHttpRequest();
  6.      } else if (window.ActiveXObject) {// code for IE5 and IE6
  7.          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.      }
  9.  
  10.      return xmlhttp;
  11.  
  12.  }
  13.  
  14.  <script type="text/javascript" >
  15.        function ckName(){
  16.         //首先获取用户名对象
  17.         var username = document.getElementById("username");
  18.         //获取XMLHttpRequest对象
  19.         var req = getXMLHttpRequest();
  20.         //创建连接
  21.       //  req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true);
  22.         req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true);
  23.         //4.发送请求
  24.         req.send(null);
  25.         //回调函数
  26.         req.onreadystatechange = function(){
  27.             if(req.readyState==4){
  28.               if(req.status==200){
  29.                  //获取message
  30.                  var  messsage = document.getElementById("message");
  31.                  if(req.responseText=="true"){
  32.                      message.innerHTML ="用户名已经存在";
  33.                  }else{
  34.                      message.innerHTML ="用户名可以使用";
  35.                  }
  36.               }
  37.  
  38.             }
  39.         }
  40.  
  41.       }
  42.  </script>
  43.  
  44.  <body>
  45.    用户名:  <input type="text"  name="username"  id="username" onblur="ckName()" />
  46.    <font id="message">请输入有效的邮箱地址</font>
  47.  </body>

Servlet模拟数据库中存在的名字，这里没有连接数据库，就直接模拟了，到实际操作中，直接从数据库中查出名字看是否存在就Ok啦！

  1. package adminServlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10.  
  11. public class CkUsernameServlet extends HttpServlet {
  12.  
  13.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         request.setCharacterEncoding("UTF-8");
  15.         response.setContentType("text/html;charset=UTF-8");
  16.         PrintWriter out = response.getWriter();
  17.  
  18.         String username = request.getParameter("username");
  19.         System.out.println(username);
  20.         if("admin".equals(username)){
  21.             out.print(true);
  22.         }else{
  23.             out.print(false);
  24.         }
  25.  
  26.     }
  27.  
  28.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  29.  
  30.         doGet(request, response);
  31.     }
  32.  
  33. }

第二种方式，就改下js代码就好了  post 提交个参数：

  1. function ckName(){
  2.            var username = document.getElementById("username");
  3.            var req = getXMLHttpRequest();
  4.            //创建连接 用post提交方式
  5.            req.open("POST","${pageContext.request.contextPath}/servlet/ckUsernameServlet",true);
  6.            //向请求添加HTTP头，这个必加，是提交到后台的方式
  7.            req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  8.            //把请求发送到服务器
  9.            req.send("username="+username.value);
  10.            //回调函数
  11.            req.onreadystatechange=function(){
  12.                 if(req.readyState==4 && req.status==200){
  13.                      var  messsage = document.getElementById("message");
  14.                      if(req.responseText=="true"){
  15.                         message.innerHTML ="用户名已经存在";
  16.                      }else{
  17.                          message.innerHTML ="用户名可以使用";
  18.                      }
  19.                }
  20.            }
  21.      }

*****第三种方式：最常用的  jQuery 和 Ajax  结合相互使用

  1.    $(document).ready(function(){
  2.            $("#username").blur(function(){
  3.                    //   alert($(this).val());
  4.              $.post("${pageContext.request.contextPath}/servlet/ckUsernameServlet",{username:$(this).val()},
  5.              function(data){
  6.                if(data=="true"){     //data 就是从servlet返回来的数据
  7.                  $("#message").html("用户名已存在");
  8.                }else{
  9.                   $("#message").html("用户名可以注册");
  10.                }
  11.              }
  12.              ,"text");
  13.  
  14.            });
  15.      });

就这样啦，大家自己练习练习就好咯！

每天都要为自己加油，打气，每天进步一点点，时间长了你就会进步一大截。共勉

Java--- Ajax异步验证用户名是否存在的更多相关文章

  1. ajax异步验证用户名密码，提示路径错误

    使用thinkphp框架异步验证用户名和密码的时候,ajax路径错误可能有多重情况.我遇到的是,我自感路径没问题,且先前使用无错.由于多人合作使用svn,所以在更新代码后,使用firebug显示一直是 ...

  2. Ajax注册验证用户名是否存在 ——引自百度经验

    Ajax注册验证用户名是否存在 http://jingyan.baidu.com/article/a948d6515fdf870a2dcd2e85.html

  3. ssm框架整合+Ajax异步验证

    SSM框架是目前企业比较常用的框架之一,它的灵活性.安全性相对于SSH有一定的优势.说到这,谈谈SSM和SSH的不同点,这也是企业常考初级程序员的面试题之一.说到这两套框架的不同,主要是持久层框架Hi ...

  4. Ajax异步验证登陆或者注册

    首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...

  5. php ajax 同时验证 用户名 密码

    今天写了一个程序分享给大家,该程序是ajax密码和用户名验证问题 第一步 先在数据库里建立一张表 有3个字段 为 id name pass 第二步 写html页面,需要引入jq库 请到官网自行下载 & ...

  6. ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册

    在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...

  7. 利用jQuery.validate异步验证用户名是否存在

    转:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851781.html HTML头部引用: <script type="te ...

  8. 请教下 Yii 和 Ajax来验证用户名是否存在

    添加一个 Custom, Model页面: CustomForm中: public function rules() { // 使用ajax 校验数据 return array( array('nam ...

  9. 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

    一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...

随机推荐

  1. ionic 需要注意的知识点

  2. Vue:Promise概要

    1.Promise中then是异步的 2.Promise 的then里面两个回调,默认第一个resolve,第二个reject:不会进入catch:如果只有一个回调则进入catch var p1=ne ...

  3. VC++运行库 集32位/64位整合版

    运行程序时,win7/win10(x86和x64)常会遇到缺少什么缺少msvc***.dll问题 安装下面链接提供的程序,安装后,便可解决. [2016-10-10]Microsoft Visual ...

  4. 退出unity运行

    public void GetExit()//退出运行 { #if UNITY_EDITOR UnityEditor.EditorApplication.isPlaying = false;//用于退 ...

  5. 前端学习历程--css①

    ---恢复内容开始--- 本文用自己的理解,总结网上或者自身经历的问题,加以汇总,方便查找: 一.浏览器默认样式 1.浏览器处理css&html a.css作用范围:盒子模式.浮动.定位.背景 ...

  6. protocol buffer简介

    一.protocol buffer简介 protocol buffer(简称PB)是google开源的一个数据序列化与反序列化工具,由于其支持多种语言.各种平台,多被用于对象的存储,远程调用等方向.用 ...

  7. centos7安装redist 以及redis扩展

    wget http://download.redis.io/releases/redis-3.2.1.tar.gz   用wget下载 $ tar xzf redis-3.2.1.tar.gz   解 ...

  8. MySQL 5.6 (Win7 64位)下载、安装与配置图文教程

    一． 工具 Win7 64位操作系统 二． 步骤 第一步:下载安装包 下载 地址:http://www.mysql.com/ 截止到目前(2016/7/24) ,官网的最新版本是5.7.13,不过自己 ...

  9. Docker Registry V2 Garbage Collection

    运行 docker run --rm -v /nfs1/docker/registry:/var/lib/registry registry:2.5.1 garbage-collect -d /roo ...

  10. 【shell】wc命令

    wc是一个非常方便的文本处理命令,有两个功能: 统计文件的行数 统计文件的字符数 那么就有三个参数: -l :只统计行数 -w: 统计英文单词数 -m: 统计字符数 default :行数+单词数 默 ...