当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Ajax验证用户名或昵称是否已被注册

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

2019年06月07日  | 移动技术网IT编程  | 我要评论

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显示已使用。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持移动技术网!

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网