Validating whether a username is already taken requires backend verification since client-side JavaScript can only check input format. This scenario is ideal for asynchronous validation to improve user experience and ensure successful form submission.
Frontend Implementation
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Username Validation</title>
<script>
var httpRequest;
function validateUsername() {
// Retrieve input value
var inputField = document.getElementById("usernameInput");
var inputValue = inputField.value;
var statusDisplay = document.getElementById("statusMessage");
if (!inputValue || inputValue.trim() === '') {
statusDisplay.innerText = "Username cannot be empty";
return;
}
statusDisplay.innerText = "";
// Initiate asynchronous request
httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "checkUsername.do?uname=" + encodeURIComponent(inputValue), true);
httpRequest.onreadystatechange = handleResponse;
httpRequest.send(null);
}
function handleResponse() {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
var responseText = httpRequest.responseText;
var statusDisplay = document.getElementById("statusMessage");
statusDisplay.innerText = responseText;
}
}
</script>
</head>
<body>
<form action="processUser.do">
Username: <input id="usernameInput" type="text" name="uname" onblur="validateUsername()">
<span id="statusMessage" style="color: red"></span><br/>
Password: <input type="password" name="pwd"><br/>
<input type="submit">
</form>
</body>
</html>
Backend Servlet Code
package com.msb.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/checkUsername.do")
public class UsernameValidatorServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("uname");
String message = "";
if ("msb".equals(username)) {
message = "Username is already taken";
} else {
message = "Username is available";
}
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print(message);
}
}
AJAX Request Flow
- Create XMLHttpRequest instance:
var xhr = new XMLHttpRequest(); - Configure connection:
xhr.open("GET", "endpoint?param=" + data, true); - Assign event handler:
xhr.onreadystatechange = callbackFunction; - Transmit request:
xhr.send(null);
Limitations
Native JavaScript AJAX implementation involves boilerplate code and can complicate handling of structured data. Modern libraries like jQuery simplify these operations.