AJAX-Anfragen mit XMLHttpRequest erstellen

Einführung

In diesem Lab werden die Teilnehmer die leistungsstarke Welt von AJAX (Asynchronous JavaScript and XML) erkunden und lernen, wie dynamische Webanwendungen mit XMLHttpRequest erstellt werden. Der umfassende Leitfaden behandelt die grundlegenden Konzepte der asynchronen Webkommunikation und führt die Lernenden durch den Prozess des Senden und Empfangs von Daten von Servern ohne Seitenneu laden.

Die Teilnehmer werden praktische Fähigkeiten im Erstellen von XMLHttpRequest-Objekten, Konfigurieren von HTTP-Anfrageverfahren, Verarbeiten von Serverantwortzuständen und Implementieren von grundlegenden AJAX-Datenabruchtechniken erwerben. Indem sie diese Kernprinzipien verstehen, werden Entwickler in der Lage sein, reaktivere und interaktivere Weblerfahrungen zu bauen, die die Benutzerbindung und die Anwendungsleistung verbessern.

AJAX und asynchrone Anfragen verstehen

In diesem Schritt lernst du über AJAX (Asynchronous JavaScript and XML) und wie es die Webkommunikation revolutioniert. AJAX ermöglicht es Webseiten, den Inhalt dynamisch zu aktualisieren, ohne die gesamte Seite neu zu laden, was eine glattere und reaktivere Benutzererfahrung schafft.

Was ist AJAX?

AJAX ist eine Webentwicklungstechnik, die es Webanwendungen ermöglicht, Daten von einem Server asynchron (im Hintergrund) zu senden und zu empfangen, ohne die Anzeige und das Verhalten der vorhandenen Seite zu stören. Dies bedeutet, dass du Teile einer Webseite aktualisieren kannst, ohne die gesamte Seite neu laden zu müssen.

Wesentliche Merkmale asynchroner Anfragen

Nicht blockierend: Im Gegensatz zu traditionellen synchronen Anfragen ermöglicht AJAX es dem Browser, andere Aufgaben auszuführen, während er auf die Serverantwort wartet.
Hintergrundkommunikation: Daten können mit dem Server ausgetauscht werden, ohne die aktuelle Interaktion des Benutzers zu unterbrechen.
Teilweise Seitenaktualisierungen: Nur bestimmte Teile einer Webseite können aktualisiert werden, was die Leistung und die Benutzererfahrung verbessert.

Einfache Demonstration des AJAX-Konzepts

Lassen Sie uns eine einfache HTML-Datei erstellen, um das Konzept asynchroner Anfragen zu veranschaulichen. Wir werden die WebIDE verwenden, um dieses Beispiel zu erstellen.

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei ~/project/ajax-demo.html:

<!doctype html>
<html>
  <head>
    <title>AJAX Demonstration</title>
  </head>
  <body>
    <h1>AJAX Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          console.log("Button clicked: Initiating AJAX request");
          // Asynchronous request will be implemented in later steps
        });
    </script>
  </body>
</html>

Echtzeit-AJAX-Anwendungsfälle

Autovervollständigung von Suchvorschlägen
Echtzeit-Inhaltse updates
Formularabschlüsse ohne Seitenneu laden
Abfragen nach neuen Benachrichtigungen
Abrufen von Daten von APIs

Warum asynchrone Anfragen wichtig sind

Asynchrone Anfragen lösen mehrere Herausforderungen der Webentwicklung:

Verbesserte Benutzererfahrung
Verringerung der Serverlast
Schnellere, reaktivere Webanwendungen
Effizientere Datenübertragung

XMLHttpRequest-Objekt erstellen

In diesem Schritt lernst du, wie du ein XMLHttpRequest-Objekt erstellst, das der Kernmechanismus für asynchrone Anfragen in JavaScript ist. Wir bauen auf der HTML-Datei des vorherigen Schritts auf und fügen die XMLHttpRequest-Funktionalität hinzu.

Öffnen Sie die Datei ~/project/ajax-demo.html in der WebIDE und aktualisieren Sie den Skriptabschnitt, um ein XMLHttpRequest-Objekt zu erstellen:

<!doctype html>
<html>
  <head>
    <title>XMLHttpRequest Demonstration</title>
  </head>
  <body>
    <h1>AJAX Request Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          // Create XMLHttpRequest object
          var xhr = new XMLHttpRequest();

          // Log the creation of XMLHttpRequest object
          console.log("XMLHttpRequest object created:", xhr);
        });
    </script>
  </body>
</html>

XMLHttpRequest-Objekt verstehen

Das XMLHttpRequest (XHR)-Objekt ist eine integrierte Browser-API, die es dir ermöglicht:

HTTP-Anfragen zu erstellen
Daten an einen Server zu senden
Daten von einem Server zu empfangen
Teile einer Webseite zu aktualisieren, ohne die Seite neu zu laden

Wesentliche Methoden von XMLHttpRequest

open(): Initialisiert eine neue Anfrage
send(): Sendet die Anfrage an den Server
onreadystatechange: Verfolgt den Status der Anfrage

Browserkompatibilität

XMLHttpRequest wird in allen modernen Browsern unterstützt, was es zu einer zuverlässigen Wahl für AJAX-Kommunikationen macht. Die moderne Webentwicklung verwendet auch die Fetch-API, aber XMLHttpRequest wird immer noch weit verbreitet verwendet.

Beispielausgabe

Wenn Sie auf die Schaltfläche "Load Data" klicken, sehen Sie eine Konsolenausgabe, die die Erstellung des XMLHttpRequest-Objekts demonstriert:

XMLHttpRequest object created: XMLHttpRequest {...}

HTTP-Anfrageverfahren konfigurieren

In diesem Schritt lernst du, wie du HTTP-Anfrageverfahren mit XMLHttpRequest konfigurierst. Wir werden die Datei ajax-demo.html aktualisieren, um zu zeigen, wie verschiedene Arten von HTTP-Anfragen eingerichtet werden.

Öffnen Sie die Datei ~/project/ajax-demo.html in der WebIDE und ändern Sie den Skriptabschnitt:

<!doctype html>
<html>
  <head>
    <title>HTTP Request Methods</title>
  </head>
  <body>
    <h1>AJAX Request Methods</h1>
    <button id="getButton">GET Request</button>
    <button id="postButton">POST Request</button>
    <div id="result"></div>

    <script>
      // GET Request Configuration
      document
        .getElementById("getButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configure GET request
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

          // Set request headers
          xhr.setRequestHeader("Content-Type", "application/json");

          // Log request details
          console.log("GET Request Configured");

          // Send the request
          xhr.send();
        });

      // POST Request Configuration
      document
        .getElementById("postButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configure POST request
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

          // Set request headers
          xhr.setRequestHeader("Content-Type", "application/json");

          // Prepare data to send
          var data = JSON.stringify({
            title: "foo",
            body: "bar",
            userId: 1
          });

          // Log request details
          console.log("POST Request Configured");

          // Send the request with data
          xhr.send(data);
        });
    </script>
  </body>
</html>

HTTP-Anfrageverfahren

Die am häufigsten verwendeten HTTP-Anfrageverfahren sind:

GET: Daten von einem Server abrufen
POST: Daten zum Verarbeiten durch den Server senden
PUT: Bestehende Daten aktualisieren
DELETE: Daten entfernen

Wesentliche Methoden zur Anfragekonfiguration

open(method, url, async):
- method: HTTP-Methode (GET, POST, etc.)
- url: Server-Endpunkt
- async: Boolean für asynchrone Anfrage (normalerweise true)
setRequestHeader(): Anfrageheader festlegen
send(): Die Anfrage senden (mit optionalen Daten)

Beispielausgabe

Wenn Sie auf die Schaltflächen klicken, sehen Sie Konsolenausgaben:

GET Request Configured
POST Request Configured

Serverantwortzustände verarbeiten

In diesem Schritt lernst du, wie du verschiedene Zustände eines XMLHttpRequest behandelst und Serverantworten verarbeitest. Wir werden die Datei ajax-demo.html aktualisieren, um die Antwortbehandlung zu demonstrieren.

Öffnen Sie die Datei ~/project/ajax-demo.html in der WebIDE und ändern Sie den Skriptabschnitt:

<!doctype html>
<html>
  <head>
    <title>Server Response Handling</title>
  </head>
  <body>
    <h1>AJAX Response States</h1>
    <button id="fetchData">Fetch Data</button>
    <div id="result"></div>

    <script>
          document
      .getElementById("fetchData")
      .addEventListener("click", function () {
              var xhr = new XMLHttpRequest();
              var resultDiv = document.getElementById("result");

              // Verfolge die Anfragestatus
              xhr.onreadystatechange = function () {
                // Logge den aktuellen Zustand
                console.log("Ready State:", xhr.readyState);

                // Überprüfe, ob die Anfrage abgeschlossen und erfolgreich ist
                if (xhr.readyState === 4) {
                  if (xhr.status === 200) {
                    // Erfolgreicher Antwort
                    versuche {
                      var data = JSON.parse(xhr.responseText);
                      resultDiv.innerHTML = `
                                    <h3>Data Received:</h3>
                                    <pre>${JSON.stringify(data, null, 2)}</pre>
                                `;
                      console.log("Request Successful");
                    } catch (error) {
                      resultDiv.innerHTML = "Error parsing response";
                      console.error("Parsing Error:", error);
                    }
                  } else {
                    // Fehlerbehandlung
                    resultDiv.innerHTML = `Error: ${xhr.status}`;
                    console.error("Request Failed", xhr.status);
                  }
                }
              };

              // Konfiguriere und sende die Anfrage
              xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
              xhr.send();
            });
    </script>
  </body>
</html>

XMLHttpRequest-Zustände

XMLHttpRequest hat 5 Zustände:

0: UNSENT (Anfrage nicht initialisiert)
1: OPENED (Verbindung hergestellt)
2: HEADERS_RECEIVED (Anfrage empfangen)
3: LOADING (Anfrage wird verarbeitet)
4: DONE (Anfrage abgeschlossen)

Wesentliche Konzepte der Antwortbehandlung

Verwende onreadystatechange, um den Fortschritt der Anfrage zu verfolgen
Überprüfe readyState === 4 für abgeschlossene Anfragen
Verifiziere status === 200 für erfolgreiche Antworten
Verwende responseText oder responseXML, um auf Daten zuzugreifen
Implementiere Fehlerbehandlung für verschiedene Statuscodes

Beispielausgabe

Wenn Sie auf "Fetch Data" klicken, sehen Sie Konsolenausgaben:

Ready State: 1
Ready State: 2
Ready State: 3
Ready State: 4
Request Successful

Grundlegende AJAX-Datenabrufe implementieren

In diesem Schritt lernst du, wie du Daten von einer API mithilfe von AJAX abrufst und anzeigt. Wir werden eine einfache Benutzermanagementanwendung erstellen, die Benutzerinformationen abruft und anzeigt.

Öffnen Sie die Datei ~/project/ajax-demo.html in der WebIDE und ersetzen Sie ihren Inhalt durch folgenden Code:

<!doctype html>
<html>
  <head>
    <title>User Management App</title>
    <style>
      #userList {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>User Management</h1>
    <button id="fetchUsers">Fetch Users</button>
    <div id="userList"></div>

    <script>
          document
      .getElementById("fetchUsers")
      .addEventListener("click", function () {
              var xhr = new XMLHttpRequest();
              var userListDiv = document.getElementById("userList");

              xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                  if (xhr.status === 200) {
                    versuche {
                      var users = JSON.parse(xhr.responseText);

                      // Lösche den vorherigen Inhalt
                      userListDiv.innerHTML = "<h2>User List</h2>";

                      // Erstelle die Benutzerliste
                      users.forEach(function (user) {
                        var userDiv = document.createElement("div");
                        userDiv.innerHTML = `
                                        <p>
                                            <strong>Name:</strong> ${user.name}<br>
                                            <strong>Email:</strong> ${user.email}<br>
                                            <strong>Company:</strong> ${user.company.name}
                                        </p>
                                    `;
                        userListDiv.appendChild(userDiv);
                      });
                    } catch (error) {
                      userListDiv.innerHTML = "Error parsing user data";
                    }
                  } else {
                    userListDiv.innerHTML = `Error fetching users: ${xhr.status}`;
                  }
                }
              };

              // Abrufe Benutzer von der JSONPlaceholder-API
              xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
              xhr.send();
            });
    </script>
  </body>
</html>

Wesentliche Konzepte des Datenabrufs

Verwende eine öffentliche API (JSONPlaceholder) zur Demonstration
Abrufe mehrere Benutzeraufzeichnungen
Analysiere die JSON-Antwort
Erstelle HTML-Elemente dynamisch
Behandle potenzielle Fehler

Beispielausgabe

Wenn Sie auf "Fetch Users" klicken, sehen Sie eine Liste von Benutzern mit ihren Details:

User List
Name: Leanne Graham
Email: Sincere@april.biz
Company: Romaguera-Crona

Name: Ervin Howell
Email: Shanna@melissa.tv
Company: Deckow-Crist

... (mehr Benutzer)

Beste Praktiken

Validiere und bereinige immer Daten
Implementiere Fehlerbehandlung
Verwende try-catch für die JSON-Analyse
Erstelle eine dynamische und reaktive Benutzeroberfläche

Zusammenfassung

In diesem Labyrinth erkunden die Teilnehmer die Grundlagen von AJAX und der asynchronen Webkommunikation und lernen, wie dynamische Web-Erlebnisse ohne vollständiges Neuladen der Seite erstellt werden können. Das Labyrinth führt Schlüsselkonzepte wie nicht blockierende Anfragen, Hintergrunddatenaustausch und partielle Seitenaktualisierungen ein und demonstriert, wie XMLHttpRequest eine nahtlose Interaktion zwischen Web-Clients und Servern ermöglicht.

Durch das Durcharbeiten von praktischen Beispielen und das Verständnis der Kernprinzipien von AJAX gewinnen die Lernenden Einblicke in die Implementierung von reaktiven Web-Anwendungen, die Daten dynamisch abrufen und anzeigen können. Das Labyrinth behandelt essentielle Techniken zum Erstellen von XMLHttpRequest-Objekten, zur Konfiguration von HTTP-Methoden, zur Behandlung von Serverantworten und zum asynchronen Abrufen von Daten und liefert eine umfassende Grundlage für moderne Webentwicklungspraktiken.