Ajax验证用户名或昵称是否已被注册


Posted in Javascript onApril 05, 2017

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力 。而用户名或昵称的验证就可以使XMLHttpRequest对象实现。下面是个小例子。

页面:

简单的输入框

<body>
  昵称:<input type="text" name="username" ><span id="msg">请输入昵称</span><br>
  密码:<input type="password" name="password">
 </body>

Ajax验证用户名或昵称是否已被注册

JS代码如下:

window.onload=function()
    {
      var nameElement=document.getElementsByName("username")[0];
      //为昵称选项注册onblur事件
      nameElement.onblur=function()
      {
        var name=this.value;
        //1.获取XMLHttpRequest对象
        var req=getXMLHttpRequest();
        //4.处理响应结果
        req.onreadystatechange=function(){
          if(req.readyState==4){//XMLHttpRequest对象读取成功
            if(req.status==200){//服务器相应正常
              var msg=document.getElementById("msg");
              //根据返回的结果显示不同的信息
              if(req.responseText=="true"){
                msg.innerHTML="<font color='red'>该昵称已注册</font>";
              }else{
                msg.innerHTML="<font color='green'>可以使用</font>";
              }
            }
          }
        }
        //2.建立一个连接
        req.open("get","${pageContext.request.contextPath}/servlet/checkUserServlet?name="+name);
        //3.发送get请求
        req.send(null);
      }
    }

getElementsByName方法,根据浏览器的不同获得不同的XMLHttpRequest对象(提供异步发送请求的能力):

function getXMLHttpRequest(){
  var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

servlet:仅仅为了测试,并没有真正从dao层查询

public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    PrintWriter pw=response.getWriter();
    String name=request.getParameter("name");
    //判断昵称是否已被使用
    if("tom".equals(name)){
      pw.print(true);
    }else{
      pw.print(false);
    }
  }
  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doGet(request, response);
  }

测试:

Ajax验证用户名或昵称是否已被注册

由于在servlet中我们只验证tom是否存在,所以tom显示已使用。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
Angular的$http与$location
Dec 26 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
JS二叉树的简单实现方法示例
Apr 05 #Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 #Javascript
js获取指定时间的前几秒
Apr 05 #Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 #Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 #Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 #Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 #Javascript
You might like
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python学习基础之循环import及import过程
2018/04/22 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
水电工岗位职责
2014/02/12 职场文书
家长对孩子的寄语
2015/02/26 职场文书
退税申请报告怎么写
2015/05/18 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
详解Oracle块修改跟踪功能
2021/11/07 Oracle
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python