Ajax使用原生态JS验证用户名是否存在
作者：chance2015
这篇文章主要为大家详细介绍了Ajax使用原生态JS验证用户名是否存在的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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");
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。