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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
详解vue.js的devtools安装
May 26 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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
1.PHP简介
2006/10/09 PHP
php cli换行示例
2014/04/22 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
详解小白之KMP算法及python实现
2019/04/04 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python openssl模块安装及用法
2020/12/06 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
银行工作检查书范文
2014/01/31 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
初中英语教学随笔
2015/08/15 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电