今天复习了一下  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. python 判断两个ip是不是处于同一网段

    a_ip:10.10.15.100b_ip:10.10.15.101c_ip:10.10.10.100netmask:255.255.255.0 def numtobinary(num): binar ...

  2. 下载文件 utils

    package cn.itcast.bos.utils;   import java.io.IOException; import java.net.URLEncoder;   import sun. ...

  3. Vue系列之 => ref获取DOM元素和组件

    可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. WebForm内置对象：Application和ViewState、Repeater的Command用法

    一.内置对象 1.Application 存贮在服务器端,占用服务器内存生命周期:永久 所有人访问的都是这一个对象 传值:传的是object类型可以传对象. string s =TextBox1.Te ...

  5. ubuntu安装git

    安装git,输入sudo apt-get install git 这是unbutu安装东西的简单命令啊 apt-get

  6. redis重要知识点

    redis是一种高级的key:value存储系统,其中value支持五种数据类型: 1.字符串(strings) 2.字符串列表(lists) 3.字符串集合(sets) 4.有序字符串集合(sort ...

  7. Html Title 标签

    Html Title 标签 Title 是 HTML Head 内部标签 <html> <head> <!-- Title标签:HTML的标头标题 --> < ...

  8. koa2 中 cookie 存在的中文问题

    koa2  中的 cookie 没办法直接设置中文,会报错 ‘ argument value is invalid ’ 解决办法: 先将它转成 ‘ base64 ’ 编码来存储 new Buffer( ...

  9. EXEC sp_executesql with multiple parameters

    传递多个参数 https://stackoverflow.com/questions/28481189/exec-sp-executesql-with-multiple-parameters http ...

  10. 面试必问的SpringCloud实现原理图

    引言 面试中面试官喜欢问组件的实现原理,尤其是常用技术,我们平时使用了SpringCloud还需要了解它的实现原理,这样不仅起到举一反三的作用,还能帮助轻松应对各种问题及有针对的进行扩展. 以下是 课 ...