今天复习了一下  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. CentOS 7 服务端口表

    # Note that it is presently the policy of IANA to assign a single well-known# port number for both T ...

  2. Fluxion无线攻击

    使用步骤 github地址 https://github.com/deltaxflux/fluxion 进入到fluxion目录下 ./fluxion 启动fluxion  启动之后会先检测没有安装的 ...

  3. The Designer (笛卡尔定理+韦达定理 || 圆的反演）

    Nowadays, little haha got a problem from his teacher.His teacher wants to design a big logo for the ...

  4. ATM Mechine (概率DP)

    题意:去银行取最多K钱,想要全部取完,但是有个限制就是如果你输入取钱的额度超过了你已有的钱,那么会接受一次警告并无法取钱,然后求最多不超过w次警告的前提下你取完所有钱所需要的最少次数. 思路:概率DP ...

  5. John Deere Service Advisor EDL V2 Diagnostic Kit

    Support Languages: English, French, German, Italian, Portuguese, Russian, Spanish. John Deere Servic ...

  6. Java内存模型学习笔记

    Java内存模型(JMM):描述了java程序中各种变量(线程共享变量)的范根规则,以及在JVM中将变量存储到内存和从内存中读取出变量这样的底层细节.共享变量就是指一个线程中的变量在其他线程中也是可见 ...

  7. [Python]基础教程（2）、PyCharm安装及中文编码

    一.PyCharm安装 http://blog.csdn.net/yctjin/article/details/70307933?locationNum=11&fps=1 这篇文章写得及其详细 ...

  8. flask --- 02. 路由, 初始化配置,蓝图

    一.Flask 路由 1.添加路由的方式 ① ② 实例: ① @app.route("/my_de") def detail() ② def detail() app.add_ur ...

  9. oracle 查询表结构

    SELECT t1.Table_Name AS "表名称", t3.comments AS "表说明", t1.Column_Name AS "字段名 ...

  10. Python入门 io篇

    简单demo with open('d:/pydemo/pythonStart/fun1.py', 'r') as f: #print(f.read()) while True: line = f.r ...