Implementar la verificación de inicio de sesión con AJAX y JSON

Introducción

En este proyecto, aprenderá a implementar una característica de verificación de inicio de sesión utilizando AJAX y la transferencia de datos JSON. El proyecto implica crear un formulario de inicio de sesión, manejar la presentación del formulario con AJAX y validar las credenciales de inicio de sesión del usuario en el lado del servidor.

👀 Vista previa

Gif de vista previa del formulario de inicio de sesión

🎯 Tareas

En este proyecto, aprenderá:

Cómo preparar el entorno del proyecto y configurar los archivos y dependencias necesarios.
Cómo implementar el formulario de inicio de sesión en la página AjaxJson.jsp utilizando HTML.
Cómo manejar la presentación del formulario de inicio de sesión utilizando jQuery y AJAX.
Cómo encapsular los datos de inicio de sesión en formato JSON y enviarlos al servidor.
Cómo recibir y procesar la respuesta JSON del servidor para determinar el estado de inicio de sesión.
Cómo redirigir al usuario a la página adecuada según el resultado del inicio de sesión.

🏆 Logros

Después de completar este proyecto, podrá:

Utilizar AJAX para enviar datos al servidor sin actualizar completamente la página.
Trabajar con el formato de datos JSON para la transferencia de datos entre el cliente y el servidor.
Manejar la presentación del formulario y la validación de la entrada del usuario en el lado del cliente.
Procesar la respuesta del servidor y actualizar la interfaz de usuario en consecuencia.
Integrar componentes del lado del cliente y del servidor para crear una característica completa de verificación de inicio de sesión.

Preparar el entorno del proyecto

En este paso, aprenderá a preparar el entorno del proyecto. Siga los pasos siguientes para completar este paso:

Abra el entorno de laboratorio y navegue hasta el directorio AjaxJsonProject utilizando el siguiente comando:
```
cd AjaxJsonProject/AjaxJsonProject
```
Inicie el servidor Tomcat con el siguiente comando:
```
mvn tomcat7:run
```
Cambie a la pestaña Web 8080 encima del entorno para ver el proyecto en ejecución.

Implementar el formulario de inicio de sesión

En este paso, aprenderá a implementar el formulario de inicio de sesión en la página AjaxJson.jsp. Siga los pasos siguientes para completar este paso:

Abra el archivo AjaxJson.jsp en el directorio AjaxJsonProject/AjaxJsonProject/src/main/webapp.

Agregue el siguiente código HTML para crear el formulario de inicio de sesión:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulario de inicio de sesión</title>
</head>
<body>
    <h2>Formulario de inicio de sesión</h2>
    <form id="loginForm">
        <label for="userName">Nombre de usuario:</label>
        <input type="text" id="userName" name="userName"><br><br>

        <label for="userPwd">Contraseña:</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

        <input type="submit" value="Iniciar sesión">
    </form>
</body>
</html>

Incluya la biblioteca jQuery agregando la siguiente etiqueta de script en la sección <head>:
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

Manejar la presentación del formulario de inicio de sesión con AJAX

En este paso, aprenderá a manejar la presentación del formulario de inicio de sesión utilizando AJAX. Siga los pasos siguientes para completar este paso:

Agregue el siguiente código JavaScript dentro de las etiquetas <script> en el archivo AjaxJson.jsp:

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // Evite el comportamiento predeterminado de presentación del formulario
            event.preventDefault();

            // Obtenga el nombre de usuario y la contraseña ingresados
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // Verifique si el nombre de usuario y la contraseña están vacíos
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("El nombre de usuario y la contraseña no pueden estar vacíos");
                return;
            }

            // Encierre los datos a enviar en formato JSON
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // Envíe una solicitud AJAX
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // Verifique si el inicio de sesión fue exitoso según los datos devueltos
                    if(response.code === 200){
                        alert("Inicio de sesión exitoso");
                        // Redirija a index.jsp después del inicio de sesión exitoso
                        window.location.href = "index.jsp";
                    } else {
                        alert("Nombre de usuario o contraseña incorrectos");
                    }
                },
                error: function(xhr, status, error){
                    console.error("La solicitud AJAX falló: " + status + ", " + error);
                }
            });
        });
    });
</script>

Este código maneja la presentación del formulario evitando el comportamiento predeterminado del formulario, obteniendo el nombre de usuario y la contraseña ingresados y enviando una solicitud AJAX al punto final /AJAXJSONLoginServlet.
El backend devolverá una respuesta JSON con una propiedad code. Si el código es 200, el inicio de sesión es exitoso y el usuario es redirigido a la página index.jsp. Si el código no es 200, el inicio de sesión falló y se muestra un mensaje de error.

Probar la funcionalidad de inicio de sesión

Inicie el servidor Tomcat con el comando mvn tomcat7:run si aún no está en ejecución.
Abra la pestaña Web 8080 encima del entorno para ver el proyecto en acción. Cuando se ejecute de nuevo, es necesario actualizar.
Ingrese un nombre de usuario y contraseña válidos, luego haga clic en el botón "Iniciar sesión".
Si el inicio de sesión es exitoso, debería ver un mensaje de alerta "Inicio de sesión exitoso" y ser redirigido a la página index.jsp.
Si el inicio de sesión falla, debería ver un mensaje de alerta "Nombre de usuario o contraseña incorrectos".

¡Felicitaciones! Ha implementado con éxito la característica de verificación de inicio de sesión utilizando AJAX y la transferencia de datos JSON.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.

Transferencia de datos JSON con AJAX