Ajax使用原生态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");
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
asp.net结合Ajax验证用户名是否存在的代码
1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { var request; var createRequest = function() { //var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { try { request = new ActiveXObject("Microsoft.XM
-
Ajax实现异步刷新验证用户名是否已存在的具体方法
都是简单的实例,所以直接发代码 静态页面Ajax.html 复制代码 代码如下: <html> <head> <title>Ajax</title> <script type="text/javascript"> function loadXMLDoc() { if (document.getElementById("account
-
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
实例: 1.请求页面AJax.aspx HTML代码 复制代码 代码如下: <div> <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> <div id="show
-
Ajax验证用户名或昵称是否已被注册
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力 .而用户名或昵称的验证就可以使XMLHttpRequest对象实现.下面是个小例子. 页面: 简单的输入框 <body> 昵称:<input type="text" name="username" ><span id="msg">请输入昵称</span><br> 密码:<in
-
Ajax 用户名验证是否存在
客户端收集表单信息. 使用XMLHttpRequest对象提交到服务器. 服务器完成验证的逻辑,返回结果信息. 浏览器端根据服务器返回的信息对用户做出一定的提示. 不过由于我的空间不支持任何服务器段语言,所以把本应在服务器的逻辑搬到了浏览器,由JavaScript来做,服务器只负责提供一个用户名的列表.最后的效果如下,试着输入test,cainiao8这些用户名,都会显示已注册. JavaScript代码分析 首先,当文档载入完毕的时候,给表格设置change事件的响应函数ajaxValidat
-
基于jQuery实现Ajax验证用户名是否存在实例
本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码. jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详
-
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
今天分享一个"利用Ajax技术来检测用户名是否存在"的例子. 利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
-
Ajax使用原生态JS验证用户名是否存在
直接上代码: reg_ajax.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax请求servlet实现用户名是否存在验证</title> </head> <body> <script type="text/javascript"> /** * 得到XMLHttpReque
-
AJAX实现注册验证用户名
本文实例为大家分享了AJAX实现注册验证用户名的具体代码,供大家参考,具体内容如下 功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可用,否则,提示可用. 接口 public interface UserDao { public User findName(String name); } 接口实现类 import java.sql.Connection; import java.sql.PreparedStatement; imp
-
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）
其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal
-
Ajax验证用户名实例代码
用Ajax验证用户名代码如下所示: 接口: get guestbook/index.php m : index a : verifyUserName username : 要验证的用户名 返回 { code : 返回的信息代码 0 = 没有错误,1 = 有错误 message : 返回的信息 具体返回信息 } js oUsername1.onblur = function() { //失去焦点的时候,把当前用户名给后端去验证 ajax('get', 'guestbook/index.php',
-
基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/jquery_aj
-
Ajax验证用户名是否存在的实例代码
jsp页面 <head> <script type="text/javascript" src="js/register.js"></script> </head> <table> <td>用户名:</td> <td> <input type="text" name="r_name" id="r_name"
-
BootstrapValidator验证用户名已存在（ajax）
Java web项目:bootstrap实现注册页面,mvc模式联合mysql数据库检查用户名的唯一性. 一.实现效果: 重置这里有bug,bootstrapValidator验证不能重置,待解决. 二.代码准备: 引入bootstrap,bootstrapValidator和jquery. <link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css&qu