脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ajax验证用户名或昵称是否已被注册

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

 更新时间：2017年04月05日 14:15:30   作者：甄情  
本文主要介绍了Ajax验证用户名或昵称是否已被注册的实例方法。具有很好的参考价值。下面跟着小编一起来看下吧

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

页面：

简单的输入框

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

这里写图片描述

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);
  }

测试：

这里写图片描述

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Js操作树节点自动折叠展开的几种方法

    Js操作树节点自动折叠展开的几种方法

    这篇文章主要介绍了Js操作树节点自动折叠展开的几种方法,需要的朋友可以参考下
    2014-05-05
  • 微信小程序通过点击事件传参(data-)的操作示例

    微信小程序通过点击事件传参(data-)的操作示例

    微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息,本文给大家介绍微信小程序通过点击事件传参(data-)的操作,感兴趣的朋友一起看看吧
    2023-12-12
  • Bootstrap模态框案例解析

    Bootstrap模态框案例解析

    这篇文章主要介绍了Bootstrap模态框案例解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • 清除浏览器缓存的几种方法总结(必看)

    清除浏览器缓存的几种方法总结(必看)

    下面小编就为大家带来一篇清除浏览器缓存的几种方法总结(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • JS数字千分位格式化实现方法总结

    JS数字千分位格式化实现方法总结

    这篇文章主要介绍了JS数字千分位格式化实现方法,结合实例形式总结分析了JS实现数字千分位格式化的常用技巧,包括字符串的分割、拼接、遍历及正则操作等相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • 谈谈IntersectionObserver懒加载的具体使用

    谈谈IntersectionObserver懒加载的具体使用

    这篇文章主要介绍了谈谈IntersectionObserver懒加载的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 微信小程序全局变量的设置、使用、修改过程解析

    微信小程序全局变量的设置、使用、修改过程解析

    这篇文章主要介绍了微信小程序全局变量的设置、使用、修改过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 给Function做的OOP扩展

    给Function做的OOP扩展

    自编框架Megami的一部分……现在发现自己实在太宅了…… 文件中出现的名字请对号入座……
    2009-05-05
  • 小程序扫描普通链接二维码跳转小程序指定界面方法

    小程序扫描普通链接二维码跳转小程序指定界面方法

    这篇文章主要介绍了小程序扫描普通链接二维码跳转小程序指定界面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS模拟超市简易收银台小程序代码解析

    JS模拟超市简易收银台小程序代码解析

    本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-08-08

最新评论