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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
jQuery实现文档树效果
Feb 20 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python for循环remove同一个list过程解析
2019/08/14 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
高山背包:High Sierra
2017/11/23 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
融资租赁计划书
2014/04/29 职场文书
2014中考励志标语
2014/06/05 职场文书
质量月活动总结
2014/08/26 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
趵突泉导游词
2015/02/03 职场文书