Dominando Requisições AJAX com JavaScript

Introdução

Neste projeto, você aprenderá como implementar requisições AJAX (JavaScript Assíncrono e XML) usando JavaScript para buscar dados de um servidor backend e exibir os resultados em uma página web.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

Como criar uma caixa de pesquisa e um botão de pesquisa em uma página web usando HTML
Como vincular um evento ao botão de pesquisa e recuperar o texto da pesquisa do campo de entrada
Como usar JavaScript para enviar uma requisição GET AJAX para um servidor backend com o texto da pesquisa como um parâmetro
Como analisar os dados JSON retornados do servidor e exibir os resultados da pesquisa na página web

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Implementar requisições AJAX (Asynchronous JavaScript and XML) usando JavaScript para buscar dados de um servidor backend
Exibir os resultados da pesquisa em uma página web, criando e anexando dinamicamente elementos HTML
Formatar e exibir os resultados da pesquisa de forma amigável ao usuário

Configurar a caixa de pesquisa e o botão de pesquisa

Nesta etapa, você aprenderá como criar a caixa de pesquisa e o botão de pesquisa na página index.jsp.

Abra o arquivo index.jsp localizado no diretório /src/main/webapp/.
Adicione o seguinte código HTML dentro da seção <body>:

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

Isso cria um campo de entrada de texto com o ID searchInput e um botão com o ID searchButton. O botão possui um atributo onclick que chama a função search() quando clicado. 3. Salve o arquivo index.jsp.

✨ Verificar Solução e Praticar

Implementar a funcionalidade de pesquisa

Nesta etapa, você aprenderá como adicionar o código JavaScript para lidar com a funcionalidade de pesquisa.

Dentro da seção <head> do arquivo index.jsp, adicione o seguinte código JavaScript:

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Search Text:", searchText); // Output search text to console
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // Send GET request and append username as parameter to 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>Search Results:</p>";

            // Check if results is an array
            if (Array.isArray(results)) {
                // Loop through each user object in the results array
                results.forEach(function (user) {
                // Create a new div element for displaying user information
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // Add a class for styling

                // Add user information to the new div element
                userDiv.innerHTML = `
                            <p>User ID: ${user.userId}</p>
                            <p>User Name: ${user.userName}</p>
                            <p>User Gender: ${user.userGender === 1 ? "Male" : "Female"}</p>
                            <p>User Age: ${user.userAge}</p>
                            <p>User Nation: ${user.userNation}</p>
                            <p>User Email: ${user.userEmail}</p>
                            <p>User Phone: ${user.userPhone}</p>
                            <p>User Address: ${user.userAddr}</p>
                        `;

                // Append the new div element to the search results div
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // If results is not an array, display corresponding message
                searchResultsDiv.innerHTML = "<p>No results found</p>";
            }
        }
    </script>

Este código JavaScript lida com a funcionalidade de pesquisa. Quando o usuário clica no botão "Search", a função search() é chamada, que envia uma requisição AJAX para o /UserServlet com o texto da pesquisa como um parâmetro. A resposta do servidor é então analisada e exibida na div searchResults usando a função displayResults(). 2. Salve o arquivo index.jsp.

Agora, você concluiu a implementação das requisições AJAX usando JavaScript. Você pode executar o projeto e testar a funcionalidade de pesquisa.