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

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

 //封装了获取XMLHttpRequest对象的方法

 function getXMLHttpRequest() {

     var xmlhttp;

     if (window.XMLHttpRequest) {// code for all new browsers

         xmlhttp = new XMLHttpRequest();

     } else if (window.ActiveXObject) {// code for IE5 and IE6

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

     }

     return xmlhttp;

 }

 <script type="text/javascript" >

       function ckName(){

        //首先获取用户名对象

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

        //获取XMLHttpRequest对象

        var req = getXMLHttpRequest();

        //创建连接

      //  req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true);

        req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true);

        //4.发送请求

        req.send(null);

        //回调函数

        req.onreadystatechange = function(){

            if(req.readyState==4){

              if(req.status==200){

                 //获取message

                 var  messsage = document.getElementById("message");

                 if(req.responseText=="true"){

                     message.innerHTML ="用户名已经存在";

                 }else{

                     message.innerHTML ="用户名可以使用";

                 }

              }

            }

        }

      }

 </script>

 <body>

   用户名:  <input type="text"  name="username"  id="username" onblur="ckName()" />

   <font id="message">请输入有效的邮箱地址</font>

 </body>

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

package adminServlet;

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 CkUsernameServlet extends HttpServlet {

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

        request.setCharacterEncoding("UTF-8");

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter out = response.getWriter();

        String username = request.getParameter("username");

        System.out.println(username);

        if("admin".equals(username)){

            out.print(true);

        }else{

            out.print(false);

        }

    }

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

        doGet(request, response);

    }

}

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

function ckName(){

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

           var req = getXMLHttpRequest();

           //创建连接 用post提交方式

           req.open("POST","${pageContext.request.contextPath}/servlet/ckUsernameServlet",true);

           //向请求添加HTTP头，这个必加，是提交到后台的方式

           req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

           //把请求发送到服务器

           req.send("username="+username.value);

           //回调函数

           req.onreadystatechange=function(){

                if(req.readyState==4 && req.status==200){

                     var  messsage = document.getElementById("message");

                     if(req.responseText=="true"){

                        message.innerHTML ="用户名已经存在";

                     }else{

                         message.innerHTML ="用户名可以使用";

                     }

               }

           }

     }

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

   $(document).ready(function(){

           $("#username").blur(function(){

                   //   alert($(this).val());

             $.post("${pageContext.request.contextPath}/servlet/ckUsernameServlet",{username:$(this).val()},

             function(data){

               if(data=="true"){     //data 就是从servlet返回来的数据

                 $("#message").html("用户名已存在");

               }else{

                  $("#message").html("用户名可以注册");

               }

             }

             ,"text");

           });

     });

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

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

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. DOM_xss预备知识

    http://xuelinf.github.io/2016/05/18/%E7%BC%96%E7%A0%81%E4%B8%8E%E8%A7%A3%E7%A0%81-%E6%B5%8F%E8%A7%88 ...

  2. int 的重载

    测试代码: 结果: 分析: 首先创建两个对象同时进行初始化所以两次调用带参的构造函数: 其次在创建一个 对象然后将其等于前两个对象相加,这里由于该类没有重载+运算符而是重载了int 所以当两个对象相加 ...

  3. Alpha阶段敏捷冲刺日志的集合贴

    敏捷冲刺日志的集合贴 Day1(4.17):http://www.cnblogs.com/software-teamwork/p/8861426.html Day2(4.20):http://www. ...

  4. 《CSS世界》读书笔记（九）

    <!-- <CSS世界>张鑫旭著 --> content内容生成技术 1. content 辅助元素生成 清除浮动: .clear:after { content: ''; d ...

  5. undefined 和null的区别

    undefined 和null的区别null是一个表示"无"的对象,转为数值时为0:undefined是一个表示"无"的原始值,转为数值时为NaN.undefi ...

  6. shell实现自动部署两台tomcat项目Ⅱ

    本次分为3个脚本, scp.sh放进第一台机器(负责传输文件), schenglee.sh放进第一台机器(自动部署), schenglee2.sh放进第二台机器(自动部署) 环境 tomcat1: 1 ...

  7. Dockerfile构建容器---构建本地tomcat

    前序 这是我第一次摸索.做个笔记记录一下. 首先准备好tomcat与jdk解压到与Dockerfile同级的目录下, 构建文件命名必须为Dockerfile, 为什么同级, 因为build的时候会默认 ...

  8. 【Alpha】Scrum Meeting 4

    目录 前言 任务分配 燃尽图 会议照片 签入记录 困难 前言 第4次会议在4月8日由PM在教一317召开. 对项目完成情况进行了确认,分配下一阶段任务.时长60min. 任务分配 姓名 当前阶段任务 ...

  9. springboot配置cxf

    1.引入两个需要的jar <dependency> <groupId>org.apache.cxf</groupId> <artifactId>cxf- ...

  10. EJB到底是什么？

    EJB到底是什么?   1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业 ...