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

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

直接上代码:

reg_ajax.html

Ajax请求servlet实现用户名是否存在验证

/**

* 得到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="用户名存在";

document.getElementById('username').style="background-color: red";

}else{

document.getElementById('usernameMsg').innerHTML="";

document.getElementById('username').style="background-color: white";

}

}

用户名
邮箱

请求的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 userList =new ArrayList();

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");

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。