Ajax使用原生态JS验证用户名是否存在


Posted in Javascript onMay 26, 2020

本文实例为大家分享了JS验证用户名是否存在的具体代码,供大家参考,具体内容如下

直接上代码:

reg_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求servlet实现用户名是否存在验证</title>
</head>
<body>

 <script type="text/javascript">

  /** 
   * 得到XMLHttpRequest对象 
   */
  function getajaxHttp() {
   var xmlHttp;
   try {
    // Firefox, Opera 8.0+, Safari 
    xmlHttp = new XMLHttpRequest();
   } catch (e) {
    // Internet Explorer 
    try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {
      alert("您的浏览器不支持AJAX!");
      return false;
     }
    }
   }
   return xmlHttp;
  }
  /** 
   * 发送ajax请求 
   * url--请求到服务器的URL 
   * methodtype(post/get) 
   * con (true(异步)|false(同步)) 
   * functionName(回调方法名,不需要引号,这里只有成功的时候才调用) 
   * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象) 
   */
  function ajaxrequest(url, methodtype, con, functionName) {
   //获取XMLHTTPRequest对象
   var xmlhttp = getajaxHttp();
   //设置回调函数(响应的时候调用的函数)
   xmlhttp.onreadystatechange = function() {
    //这个函数中的代码在什么时候被XMLHTTPRequest对象调用?
    //当服务器响应时,XMLHTTPRequest对象会自动调用该回调方法
    if (xmlhttp.readyState == 4) {
     if (xmlhttp.status == 200) {
      functionName(xmlhttp.responseText);
     }
    }
   };
   //创建请求
   xmlhttp.open(methodtype, url, con);
   //发送请求
   xmlhttp.send();
  }
  function checkUsername() {
   var username=document.getElementById('username').value;
   //调用ajax请求Servlet
   ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
  }
  function ckUsernameResponse(responseContents){
   if (responseContents=='yes') {
    document.getElementById('usernameMsg').innerHTML="<font color='red'>用户名存在</font>";
    document.getElementById('username').style="background-color: red";
   }else{
    document.getElementById('usernameMsg').innerHTML="";
    document.getElementById('username').style="background-color: white";
   }
  }

 </script>

 <table>
  <tr>
   <td>用户名</td>
   <td><input type="text" id="username" onblur="checkUsername()"/></td>
   <td><div id="usernameMsg"></div></td>
  </tr>
  <tr>
   <td>邮箱</td>
   <td><input type="text" id="email" /></td>
   <td><div id="emailMsg"></div></td>
  </tr>
 </table>


</body>
</html>

请求的Servlet代码如下,UserServlet.java

package cn.bestchance.servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class UserServlet
 */
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;


 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response);
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String username=request.getParameter("username");
  //这里使用ArrayList代替从数据库中查询数据
  ArrayList<String> userList =new ArrayList<String>();
  userList.add("admin");
  userList.add("test");
  userList.add("chance");
  //验证用户名是否存在
  boolean flag = false;
  for (String string : userList) {
   if(string.equals(username)){
    flag = true;
    break;
   }
  }
  if(flag){//用户名已存在
   response.getWriter().print("yes");
  }else{//用户名不存在
   response.getWriter().print("no");
  }
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 #Javascript
老生常谈JQuery data方法的使用
Sep 09 #Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 #Javascript
jQuery内容过滤选择器用法示例
Sep 09 #Javascript
Vue.js动态组件解析
Sep 09 #Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
django的settings中设置中文支持的实现
2019/04/28 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python中如何引入第三方模块
2020/05/27 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
银行员工职业规划范文
2014/01/21 职场文书
小学生秋游活动方案
2014/02/23 职场文书
国际商务专业求职信
2014/07/15 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle