Página de Login (login.jsp):
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sistema de Login</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden" name="acao" value="login"/>
Usuário: <input type="text" maxlength="10" name="usuario" id="campoUsuario" onblur="validarCampo('usuario')">
<span id="validacaoUsuario" style="color:red"></span>
<br><br>
Senha: <input type="password" maxlength="10" name="senha" id="campoSenha" onblur="validarCampo('senha')"/>
<span id="validacaoSenha" style="color:red"></span>
<br><br>
<input type="submit" value="Entrar"/> <input type="reset" value="Limpar"/>
</form>
</body>
<script type="text/javascript">
var requisicaoAjax;
var tipoAcao;
// Ao perder o foco, dispara requisição AJAX para validação
function validarCampo(tipo){
tipoAcao = tipo;
var url;
if(window.XMLHttpRequest){
requisicaoAjax = new XMLHttpRequest();
} else if(window.ActiveXObject){
requisicaoAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
if(tipo == 'usuario'){
tipoAcao = 'validarUsuario';
var usuario = document.getElementById("campoUsuario").value;
url = "validador.jsp?acao=validarUsuario&usuario=" + encodeURIComponent(usuario);
requisicaoAjax.open("GET", url, true);
} else if(tipo == 'senha'){
tipoAcao = 'validarSenha';
var senha = document.getElementById("campoSenha").value;
url = "validador.jsp?acao=validarSenha&senha=" + encodeURIComponent(senha);
requisicaoAjax.open("POST", url, true);
}
requisicaoAjax.onreadystatechange = processarResposta;
requisicaoAjax.send(null);
}
// Função de callback para processar a resposta do servidor
function processarResposta(){
if(requisicaoAjax.readyState == 4){
if(requisicaoAjax.status == 200){
var resposta = requisicaoAjax.responseText;
console.log(resposta);
if(tipoAcao == 'validarUsuario'){
if(resposta == "invalido"){
document.getElementById("validacaoUsuario").innerText = "Usuário inválido!";
} else if(resposta == 'valido'){
document.getElementById("validacaoUsuario").innerText = "Usuário válido!";
}
} else if(tipoAcao == 'validarSenha'){
if(resposta == "invalido"){
document.getElementById("validacaoSenha").innerText = "Senha incorreta!";
} else if(resposta == 'valido'){
document.getElementById("validacaoSenha").innerText = "Senha correta!";
}
}
}
}
}
</script>
</html>
Backend de Validação (validador.jsp):
<%
// Configuração de cabeçalhos para resposta sem cache e com codificação UTF-8
response.setContentType("text/plain;charset=utf-8");
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
String acao = request.getParameter("acao");
if(acao != null && acao.equals("validarUsuario")){
String usuario = request.getParameter("usuario");
if(usuario != null && !usuario.equals("admin")){
response.getWriter().write("invalido");
} else {
response.getWriter().write("valido");
}
} else if(acao != null && acao.equals("validarSenha")){
String senha = request.getParameter("senha");
if(senha != null && !senha.equals("admin")){
response.getWriter().write("invalido");
} else {
response.getWriter().write("valido");
}
}
%>
Observações Importantes:
- O objeto XMLHttpRequest suporta diversos métodos e propriedades para controle da requisição e resposta
- É importante configurar os cabeçalhos HTTP corretamente para evitar problemas de cache e codificação
- O método
encodeURIComponent()é utilizado para evitar problemas com caracteres especiais nos parâmetros da URL - A definição de
contentTypeem JSP é crucial para garantir que o conteúdo seja interpretado corretamente pelo cliente
Diferença entre pageEncoding e contentType em JSP:
pageEncoding: Refere-se à codificação do arquivo JSP em sicontentType: Define o tipo MIME e codificação do conteúdo enviado para o cliente- Por padrão, JSP utiliza MIME type
text/htmlcom codificação ISO-8859-1 - Ao especificar
contentType="text/html;charset=utf-8", garante-se que o conteúdo será enviado com codificação UTF-8
Este exemplo demonstra uma implementação básica de validação de formulário com AJAX. Em aplicações reais, considere adicionar tratamento de erros mais robusto, validação no lado do cliente e medidas de segurança adicionais.