Maîtriser les requêtes AJAX avec JavaScript

Introduction

Dans ce projet, vous allez apprendre à implémenter des requêtes AJAX (Asynchronous JavaScript and XML) en utilisant JavaScript pour récupérer des données à partir d'un serveur backend et afficher les résultats sur une page web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment créer une zone de recherche et un bouton de recherche sur une page web à l'aide de HTML
Comment lier un événement au bouton de recherche et récupérer le texte de recherche à partir du champ d'entrée
Comment utiliser JavaScript pour envoyer une requête AJAX GET à un serveur backend avec le texte de recherche comme paramètre
Comment analyser les données JSON renvoyées par le serveur et afficher les résultats de recherche sur la page web

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Implémenter des requêtes AJAX (Asynchronous JavaScript and XML) en utilisant JavaScript pour récupérer des données à partir d'un serveur backend
Afficher les résultats de recherche sur une page web en créant et en ajoutant dynamiquement des éléments HTML
Formater et afficher les résultats de recherche de manière conviviale

Configurer la zone de recherche et le bouton de recherche

Dans cette étape, vous allez apprendre à créer la zone de recherche et le bouton de recherche sur la page index.jsp.

Ouvrez le fichier index.jsp situé dans le répertoire /src/main/webapp/.
Ajoutez le code HTML suivant dans la section <body> :

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

Cela crée un champ de saisie de texte avec l'ID searchInput et un bouton avec l'ID searchButton. Le bouton a un attribut onclick qui appelle la fonction search() lorsqu'il est cliqué. 3. Enregistrez le fichier index.jsp.

✨ Vérifier la solution et pratiquer

Implémenter la fonctionnalité de recherche

Dans cette étape, vous allez apprendre à ajouter le code JavaScript pour gérer la fonctionnalité de recherche.

Dans la section <head> du fichier index.jsp, ajoutez le code JavaScript suivant :

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Texte de recherche :", searchText); // Affiche le texte de recherche dans la console
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // Envoie une requête GET et ajoute le nom d'utilisateur en tant que paramètre à l'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>Résultats de recherche :</p>";

            // Vérifie si results est un tableau
            if (Array.isArray(results)) {
                // Parcourt chaque objet utilisateur dans le tableau results
                results.forEach(function (user) {
                // Crée un nouveau élément div pour afficher les informations de l'utilisateur
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // Ajoute une classe pour la mise en forme

                // Ajoute les informations de l'utilisateur au nouveau élément div
                userDiv.innerHTML = `
                            <p>ID utilisateur : ${user.userId}</p>
                            <p>Nom d'utilisateur : ${user.userName}</p>
                            <p>Genre de l'utilisateur : ${user.userGender === 1? "Homme" : "Femme"}</p>
                            <p>Âge de l'utilisateur : ${user.userAge}</p>
                            <p>Nationalité de l'utilisateur : ${user.userNation}</p>
                            <p>Adresse e-mail de l'utilisateur : ${user.userEmail}</p>
                            <p>Téléphone de l'utilisateur : ${user.userPhone}</p>
                            <p>Adresse de l'utilisateur : ${user.userAddr}</p>
                        `;

                // Ajoute le nouveau élément div au div des résultats de recherche
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // Si results n'est pas un tableau, affiche le message correspondant
                searchResultsDiv.innerHTML = "<p>Aucun résultat trouvé</p>";
            }
        }
    </script>

Ce code JavaScript gère la fonctionnalité de recherche. Lorsque l'utilisateur clique sur le bouton "Rechercher", la fonction search() est appelée, qui envoie une requête AJAX au /UserServlet avec le texte de recherche en tant que paramètre. La réponse du serveur est ensuite analysée et affichée dans le div searchResults à l'aide de la fonction displayResults(). 2. Enregistrez le fichier index.jsp.

Maintenant, vous avez terminé l'implémentation des requêtes AJAX en utilisant JavaScript. Vous pouvez exécuter le projet et tester la fonctionnalité de recherche.