JavaScript/Tutorials/App/Daten mit JS nachladen

15min

einfach

Kenntnisse in

• Einstieg in HTML
• JavaScript und das DOM

Die ToDo-Liste aus dem DOM-Tutorial speichert Termine und Daten mit Web Storage auf dem Gerät des Nutzers - bei einem Wechsel an den Desktop-PC sind diese Daten nicht verfügbar. Deshalb sollten solche Daten serverseitig gespeichert und nach erfolgreichem Login abgerufen werden.

Dabei lädt unsere App einzelne Datenelemente vom Server, um Abschnitte einer Webseite zu aktualisieren, ohne die ganze Seite neu zu laden. Dieses scheinbar kleine Detail hat enorme Auswirkungen auf die Leistung und das Verhalten von Websites.

Dieses Tutorial zeigt, wie man mit der Fetch-API und WebSockets Daten mit JavaScript (nach)lädt.

Request und Response

Eine Webseite besteht aus einer HTML-Seite und (in der Regel) verschiedenen anderen Dateien, wie Stylesheets, Skripten und Bildern. Das grundlegende Modell für das Laden von Seiten im Web sieht so aus, dass der Browser eine oder mehrere HTTP-Anfragen an den Server sendet, um die für die Anzeige der Seite erforderlichen Dateien anzufordern, und der Server antwortet mit den angeforderten Dateien. Wenn du eine andere Seite besuchst, fordert der Browser die neuen Dateien an, und der Server antwortet mit diesen.

Dieses Modell funktioniert für viele Websites hervorragend. In unserer ToDo-Liste wollen wir beim Anlegen neuer Aufgaben überpüfen, ob es diese schon gibt. Wenn dies der Fall ist, muss die Seite mit den neuen Aufgaben aktualisiert werden. Allerdings bleibt der Großteil des Seiteninhalts – einschließlich Elementen wie Seitenkopfzeile, Seitenleiste und Fußzeile – unverändert.

Das Problem beim traditionellen Modell ist, dass wir die gesamte Seite abrufen und laden müssen, auch wenn wir nur einen Teil davon aktualisieren müssen. Dies ist ineffizient und kann zu einer schlechten Benutzererfahrung führen.

Anstelle des herkömmlichen Modells verwenden viele Websites daher JavaScript-APIs, um Daten vom Server anzufordern und den Seiteninhalt ohne Neuladen der Seite zu aktualisieren. Wenn der Benutzer also nach einem neuen Eintrag sucht, fordert der Browser nur die Daten an, die zur Aktualisierung der Seite erforderlich sind:

Fetch

Die wichtigste API hierbei ist die Fetch-API. Diese ermöglicht es JavaScript, das auf einer Seite ausgeführt wird, eine HTTP-Anfrage an einen Server zu senden, um bestimmte Ressourcen abzurufen. Wenn der Server diese bereitstellt, kann JavaScript die Daten verwenden, um die Seite zu aktualisieren, in der Regel mithilfe von DOM-Manipulations-APIs. Bei den angeforderten Daten handelt es sich häufig um JSON, ein Format, das sich gut für die Übertragung strukturierter Daten eignet, aber es kann sich auch um HTML oder einfachen Text handeln.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

WebSockets

Die WebSocket API ermöglicht es, eine dauerhafte Verbindung zwischen einer Webanwendung und einem Serverdienst aufzubauen, bei der du Nachrichten zum Server senden und ereignisorientierte Antworten erhalten kannst.

Wenn du Echtzeit-Updates benötigst, verwende WebSockets anstelle von periodischen fetch-Anfragen.

Beispiel

const socket = new WebSocket('wss://example.com/socket');
socket.onmessage = (event) => console.log('New data:', event.data);