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请求Servletajaxrequest（"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"）;}}}

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