今天复习了一下  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. std::function

    参考资料 • cplusplus.com:http://www.cplusplus.com/reference/functional/function/ • cppreference.com:http ...

  2. c#XML转换成实体

    首选:我的XML文件如下(mysql表里导出的):几千条,就选2条做例子. <?xml version="1.0" encoding="utf-8" ?& ...

  3. Newtonsoft.Json解析数组

    以下是解析json数组: var jsonInfo=[{"name":"abc","id":"1","coun ...

  4. PHP提交表单失败后如何保留填写的信息

    index.html模板文件大内容: <html> <head> <title>jQuery Ajax 实例演示</title> </head&g ...

  5. The All-purpose Zero (最长公共子序列)

    题意:求最长公共子序列,但是有个辅助条件,那就是如果那个值为0,那么他可以更换为任意值. 思路:假设现在只剩下没有0的序列是不是就很好求了?那么我们的想法就是看有没有办法将0往最左端或者最有端移动,显 ...

  6. guest project <web接口开发与自动化测试>

    一次写接口,简单记录一下... 参照虫师大大的书写的,有做小的修改... github上guest项目地址:git@github.com:lixiaofeng1993/guest.git web ap ...

  7. 运行maven install命令时出现错误（BUILD FAILURE）

    运行run as—>maven install时出现以下错误: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-com ...

  8. flutter控件之ExpansionPanelList

    import 'package:flutter/material.dart'; class LearnExpansionPanelList extends StatefulWidget{ @overr ...

  9. P2877 [USACO07JAN]牛校Cow School（01分数规划+决策单调性分治）

    P2877 [USACO07JAN]牛校Cow School 01分数规划是啥(转) 决策单调性分治,可以解决(不限于)一些你知道要用斜率优化却不会写的问题 怎么证明?可以暴力打表 我们用$ask(l ...

  10. ps | grep排除grep这个进程

    我们经常用ps | grep xxx来查询是否存在某进程,但默认情况下会将grep这个命令也作为结果返回,这样无论是否存在查询的进程,该命令的返回值都是0. 要避免这种情况可以使用grep的-v参数, ...