Meisterhaftigkeit in AJAX-Anfragen mit JavaScript

Einführung

In diesem Projekt lernst du, wie du AJAX (Asynchronous JavaScript and XML) Anfragen mit JavaScript implementierst, um Daten von einem Backend-Server abzurufen und die Ergebnisse auf einer Webseite anzuzeigen.

👀 Vorschau

Vorschau des AJAX-Projekts

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du eine Suchbox und einen Suchbutton auf einer Webseite mit HTML erstellst
Wie du einem Ereignis am Suchbutton eine Bindung erstellst und den Suchtext aus dem Eingabefeld abrufst
Wie du JavaScript verwendest, um eine AJAX GET-Anfrage an einen Backend-Server zu senden, wobei der Suchtext als Parameter verwendet wird
Wie du die von dem Server zurückgegebenen JSON-Daten analysierst und die Suchergebnisse auf der Webseite anzeigst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

AJAX (Asynchronous JavaScript and XML) Anfragen mit JavaScript zu implementieren, um Daten von einem Backend-Server abzurufen
Die Suchergebnisse auf einer Webseite anzuzeigen, indem du HTML-Elemente dynamisch erstellst und anhängst
Die Suchergebnisse in einem benutzerfreundlichen Format anzuzeigen

Suchbox und Suchbutton einrichten

In diesem Schritt lernst du, wie du die Suchbox und den Suchbutton auf der index.jsp-Seite erstellst.

Öffne die Datei index.jsp, die sich im Verzeichnis /src/main/webapp/ befindet.
Füge den folgenden HTML-Code innerhalb des <body>-Abschnitts hinzu:

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

Dies erstellt ein Text-Eingabefeld mit der ID searchInput und einen Button mit der ID searchButton. Der Button hat ein onclick-Attribut, das die search()-Funktion aufruft, wenn er angeklickt wird. 3. Speichere die Datei index.jsp.

Die Suchfunktionalität implementieren

In diesem Schritt lernst du, wie du den JavaScript-Code hinzufügen, um die Suchfunktionalität zu behandeln.

Füge innerhalb des <head>-Abschnitts der index.jsp-Datei folgenden JavaScript-Code hinzu:

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Suchtext:", searchText); // Suchtext in die Konsole ausgeben
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // GET-Anfrage senden und Benutzernamen als Parameter an die URL anhängen
            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>Suchergebnisse:</p>";

            // Überprüfen, ob results ein Array ist
            if (Array.isArray(results)) {
                // Durchlaufen jedes Benutzerobjekts im results-Array
                results.forEach(function (user) {
                // Erstellen eines neuen Div-Elements für die Anzeige von Benutzerinformationen
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // Klasse für das Styling hinzufügen

                // Benutzerinformationen zum neuen Div-Element hinzufügen
                userDiv.innerHTML = `
                            <p>Benutzer-ID: ${user.userId}</p>
                            <p>Benutzername: ${user.userName}</p>
                            <p>Benutzer-Geschlecht: ${user.userGender === 1? "Männlich" : "Weiblich"}</p>
                            <p>Benutzer-Alter: ${user.userAge}</p>
                            <p>Benutzer-Nation: ${user.userNation}</p>
                            <p>Benutzer-E-Mail: ${user.userEmail}</p>
                            <p>Benutzer-Telefon: ${user.userPhone}</p>
                            <p>Benutzer-Adresse: ${user.userAddr}</p>
                        `;

                // Das neue Div-Element an den Suchergebnissen-Div anhängen
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // Wenn results kein Array ist, entsprechende Nachricht anzeigen
                searchResultsDiv.innerHTML = "<p>Keine Ergebnisse gefunden</p>";
            }
        }
    </script>

Dieser JavaScript-Code behandelt die Suchfunktionalität. Wenn der Benutzer den "Search"-Button klickt, wird die search()-Funktion aufgerufen, die eine AJAX-Anfrage an den /UserServlet sendet, wobei der Suchtext als Parameter verwendet wird. Die Antwort vom Server wird dann analysiert und mithilfe der displayResults()-Funktion im searchResults-Div angezeigt. 2. Speichere die index.jsp-Datei.

Jetzt hast du die Implementierung der AJAX-Anfragen mit JavaScript abgeschlossen. Du kannst das Projekt ausführen und die Suchfunktionalität testen.

Ausführen

Schließlich kannst du den Code in der Konsole mit folgenden Befehlen kompilieren und ausführen:

cd ServletAjaxProject
mvn tomcat7:run

Du kannst auf die folgenden Ausführungs-Effekte verweisen:

Beispiel für die Suchfunktionalität

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.

Implementierung von AJAX-Anfragen mit JS