Usar Ajax para validar un formulario de login
En este ejemplos se muestra como realizar un formulario de login usando Ajax para validar las credenciales. Si el acceso es correcto se pasa a la página protegida y si no es correcto aparece en el formulsrio un mensaje indicando que no se ha admitido el login.
La comprobación del password, la página protegida y el logout se realiza mediante scripts php.(puedes descargalos en zip).
En el grupo de facebook tienes un diagrama de funcionamiento de Ajax
Solución
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class="card shadow my-auto mw-100" style="width:340px">
<div class="card-header"><h2>Login</h2></div>
<div class="card-body">
<form onsubmit="return login()">
<label class="form-label" for="identificador">Ingrese su identificador</label>
<input type="text" class="form-control my-2" id="identificador" name="identificador">
<label class="form-label" for="password">Ingrese su password</label>
<input type="password" class="form-control" id="password" name="password">
<div id="resultado" class="visually-hidden text-center text-danger fw-bold">
</div>
<input type="submit" class="btn btn-primary mt-4 px-4 d-block mx-auto" value="Enviar">
</form>
</div>
</div>
</div>
</body>
<script>
function login(){
//Elimino el manejador del evento por defecto
event.preventDefault();
//recojo los datos del formulario
let form = event.target;
let data = new FormData(form);
//creo el objeto Ajax
let ajx = new XMLHttpRequest();
//Esta es la función callback
ajx.onreadystatechange = function (e) {
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
let cuadro = document.getElementById('resultado');
if (this.responseText == "OK"){
location = "scripts/loginok.php";
}else{
cuadro.classList.remove('visually-hidden');
cuadro.innerHTML = this.responseText;
}
} else {
console.log("Error: " + this.status);
}
}
}
ajx.open('POST', "./scripts/login.php" , true);
ajx.setRequestHeader("X-Requested-With","XMLHttpRequest");
ajx.send(data);
return false;
}
</script>
Explicación
En el formulario no uso action sino el evento onsubmit(). Este evento es manejado por la función login()
Esta función recoge los datos del formulario en la variable data
La función se limita a crear un objeto XMLHttpRequest (Ajax, para entendernos).
A este objeto le agregamos la función callback encargada de gestionar la respuesta devuelta tras la llamada al script php con el objeto Ajax. Esto se hace en la propiedad onreadystatechange
Esta función se ejecuta cuando la petición Ajax devuelve algo. Si el estado es. digamos, estable (4) el texto devuetlo está disponible. En este ejemplo uso text pero podría usarse JSON.
A continuación se abre el canal indicando el método de envío de datos (POST en este ejemplo), y el destino (la url del programa php). El tercer parámetro le indica que es una llamada asíncrona, o sea, que javascript no espera al resultado y seguirá su curso. Cuando termina la llamada actuará la función callback.
Colocamos la cabecera de la petición, para que el destino recoja los datos como recibidos desde un formulario.
Solo queda enviar la petición. Sera recibida en este caso por un archivo php que se encarga de hacer la comprobación del logín.
Los archivos php puedes descargarlos en este zip. Están comentados, pero son muy sencillos, solo para dar soporte al ejemplo de javascript. No obstante puedes modificarlos y usarlos en una aplicación más completa como envío de correo, lamcenamiento o lectura debases de datos.