Dominando las solicitudes AJAX con JavaScript

Introducción

En este proyecto, aprenderás a implementar solicitudes AJAX (Asynchronous JavaScript and XML) utilizando JavaScript para obtener datos de un servidor backend y mostrar los resultados en una página web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo crear una caja de búsqueda y un botón de búsqueda en una página web utilizando HTML
Cómo enlazar un evento al botón de búsqueda y recuperar el texto de búsqueda del campo de entrada
Cómo utilizar JavaScript para enviar una solicitud GET AJAX a un servidor backend con el texto de búsqueda como parámetro
Cómo analizar los datos JSON devueltos por el servidor y mostrar los resultados de búsqueda en la página web

🏆 Logros

Después de completar este proyecto, serás capaz de:

Implementar solicitudes AJAX (Asynchronous JavaScript and XML) utilizando JavaScript para obtener datos de un servidor backend
Mostrar los resultados de búsqueda en una página web creando y adjuntando dinámicamente elementos HTML
Formatear y mostrar los resultados de búsqueda de manera amigable para el usuario

Configurar la caja de búsqueda y el botón de búsqueda

En este paso, aprenderás a crear la caja de búsqueda y el botón de búsqueda en la página index.jsp.

Abra el archivo index.jsp ubicado en el directorio /src/main/webapp/.
Agregue el siguiente código HTML dentro de la sección <body>:

<input type="text" id="searchInput" />
<button id="searchButton" onclick="search()">Buscar</button>
<div id="searchResults"></div>

Esto crea un campo de entrada de texto con el ID searchInput y un botón con el ID searchButton. El botón tiene un atributo onclick que llama a la función search() cuando se hace clic en él. 3. Guarde el archivo index.jsp.

✨ Revisar Solución y Practicar

Implementar la funcionalidad de búsqueda

En este paso, aprenderás a agregar el código JavaScript para manejar la funcionalidad de búsqueda.

Dentro de la sección <head> del archivo index.jsp, agregue el siguiente código JavaScript:

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Texto de búsqueda:", searchText); // Imprime el texto de búsqueda en la consola
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // Envía una solicitud GET y agrega el nombre de usuario como parámetro a la URL
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                var response = JSON.parse(xhr.responseText);
                displayResults(response);
                }
            };
            xhr.send();
            }

            function displayResults(results) {
            var searchResultsDiv = document.getElementById("searchResults");
            searchResultsDiv.innerHTML = "<p>Resultados de búsqueda:</p>";

            // Verifica si results es un array
            if (Array.isArray(results)) {
                // Itera a través de cada objeto de usuario en el array de resultados
                results.forEach(function (user) {
                // Crea un nuevo elemento div para mostrar la información del usuario
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // Agrega una clase para el estilo

                // Agrega la información del usuario al nuevo elemento div
                userDiv.innerHTML = `
                            <p>ID de usuario: ${user.userId}</p>
                            <p>Nombre de usuario: ${user.userName}</p>
                            <p>Género de usuario: ${user.userGender === 1? "Masculino" : "Femenino"}</p>
                            <p>Edad de usuario: ${user.userAge}</p>
                            <p>Nacionalidad de usuario: ${user.userNation}</p>
                            <p>Correo electrónico de usuario: ${user.userEmail}</p>
                            <p>Teléfono de usuario: ${user.userPhone}</p>
                            <p>Dirección de usuario: ${user.userAddr}</p>
                        `;

                // Adjunta el nuevo elemento div al div de resultados de búsqueda
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // Si results no es un array, muestra el mensaje correspondiente
                searchResultsDiv.innerHTML = "<p>No se encontraron resultados</p>";
            }
        }
    </script>

Este código JavaScript maneja la funcionalidad de búsqueda. Cuando el usuario hace clic en el botón "Buscar", se llama a la función search(), que envía una solicitud AJAX al /UserServlet con el texto de búsqueda como parámetro. La respuesta del servidor se analiza y se muestra en el div searchResults utilizando la función displayResults(). 2. Guarde el archivo index.jsp.

Ahora, has completado la implementación de las solicitudes AJAX utilizando JavaScript. Puedes ejecutar el proyecto y probar la funcionalidad de búsqueda.