今天复习了一下  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. 解救小哈——dfs深搜

    问题描述: 小哈去玩迷宫,结果迷路了,小哼去救小哈.迷宫由n行m列的单元格组成(n和m都小于等于50),每个单元格要么是空地,要么是障碍物. 问题:帮小哼找到一条从迷宫的起点通往小哈所在位置的最短路径 ...

  2. https://scrapingclub.com/exercise/detail_sign/

    def parse(self, response): # pattern1 = re.compile('token=(.*?);') # token = pattern1.findall(respon ...

  3. 浅探网络1---tcp协议详解（三次握手和四次挥手）

    TCP协议是网络多层协议中运输层的最重要的协议之一,运输层是两台主机的进程之间的通信.除了TCP还有一个是UDP协议(用户数据包协议) TCP全称是Transmission Control Proto ...

  4. Windows 服务器自动重启定位

    有个非常好的小技巧,就是在服务器端命令行,执行systeminfo,能查到服务器上一次重启的时间,依照这个时间在Event Log里再找相应的日志就容易多了. 补充:还能查到这台服务器是虚拟机还是实体 ...

  5. Python自然语言处理笔记【一】文本分类之监督式分类

    一.分类问题 分类是为了给那些已经给定的输入选择正确的标签. 在基本的分类任务中,每个输入都被认为与其他的输入是隔离的.每个类别的标签集是预先定义好的(只有把类别划分好了,才能给输入划分类别). 分类 ...

  6. Redis学习-常用命令

    keys * 返回满足的所有键 exists key 是否存在指定的key,存在返回1,不存在返回0 expire key time 设置指定key的过期时间,可以使用ttl key查看剩余时间 pe ...

  7. Shift键的三个妙用！Word又现神操作！

    1.Shift+Alt+上下方向键 :调整段落顺序 同时按这三个键,能够调整段落的顺序,也可以用来调整表格中的行序. 2.Shift+F3:英文大写/小写/首字母大写,这三种模式切换 PS:如果中间夹 ...

  8. Linux 进程级开启最大文件描述符 调优

    开启最大文件数 系统可以开启的最大文件描述符(可同时开启最多的文件数),最大开启65535,可根据需求进行调优. 查看系统当前可开启最大文件描述符数 ulimit -n [root@localhost ...

  9. (转载)Unity学习笔记：关于Dropdown的学习

    今天组长让我写一个界面,其中用到了下拉条,我的印象还停留在以前的NGUI有现成的组件,但是uGUI没有的那阶段,组长跟我说uGUI现在也有了,研究了一下,发现real方便哦,今天就来简单说一下用法吧. ...

  10. IdentityServer4支持的授权类型以及组合

    支持的授权类型: implicit hybrid authorization_code client_credentials password 支持的组合: implicit implicit,cli ...