Directly upload the code:
reg_ajax.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax requests servlet to implement the username to verify whether the username exists</title></head><body> <script type="text/javascript"> /** * Get XMLHttpRequest object*/ 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("Your browser does not support AJAX!"); return false; } } } return xmlHttp; } /** * Send ajax request* url--Request URL to the server * methodtype(post/get) * con (true(asynchronous)|false(synchronous)) * functionName(Callback method name, no quotation marks are required, it is called only when it is successful) * (Note: This method has two parameters, one is xmlhttp and the other is the object to be processed) */ function ajaxrequest(url, methodtype, con, functionName) { //Get XMLHTTPRequest object var xmlhttp = getajaxHttp(); //Set the callback function (a function called when responding) xmlhttp.onreadystatechange = function() { //When is the code in this function called by the XMLHTTPRequest object? //When the server responds, the XMLHTTPRequest object will automatically call the callback method if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { functionName(xmlhttp.responseText); } } } }; //Create a request xmlhttp.open(methodtype, url, con); //Send request xmlhttp.send(); } function checkUsername() { var username=document.getElementById('username').value; //Create ajax request Servlet ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse); } function ckUsernameResponse(responseContents){ if (responseContents=='yes') { document.getElementById('usernameMsg').innerHTML="<font color='red'>username exist</font>"; document.getElementById('username').style="background-color: red"; }else{ document.getElementById('usernameMsg').innerHTML=""; document.getElementById('username').style="background-color: white"; } } </script> <table> <tr> <td>Username</td> <td><input type="text" id="username" onblur="checkUsername()"/></td> <td><div id="usernameMsg"></div></td> </tr> <tr> <td>Email</td> <td><input type="text" id="email" /></td> <td><div id="emailMsg"></div></td> </tr> </table></body></html>The requested Servlet code is as follows, 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.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 is used here instead of querying data from the database. ArrayList<String> userList =new ArrayList<String>(); userList.add("admin"); userList.add("test"); userList.add("chance"); //Verify whether the username has boolean flag = false; for (String string : userList) { if(string.equals(username)){ flag = true; break; } } if(flag){//The username already exists response.getWriter().print("yes"); }else{//The username does not exist response.getWriter().print("no"); } }}The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.