AJAX-Grundlagen

AJAX (Asynchronous JavaScript and XML) beschreibt die Technik, Daten im Hintergrund nachzuladen, ohne die ganze Webseite neu zu laden. Obwohl ursprünglich XML genutzt wurde, ist heute JSON das gängigste Datenformat.

Was ist AJAX?

AJAX ist ein Webentwicklungskonzept, das folgende Technologien vereint:

• JavaScript für Logik und Anfragen
• Asynchrone Kommunikation, damit die Seite benutzbar bleibt
• JSON als Datenformat (statt XML)
• DOM-Manipulation, um die Seite live zu aktualisieren

Vorteile von AJAX

• Verbesserte Nutzererfahrung (keine kompletten Seitenneuladungen)
• Schnellere Reaktionen, weniger unnötige Datenübertragung
• Inhalte werden gezielt und dynamisch nachgeladen

AJAX-Ablauf

1. Ein Ereignis (z.B. Button-Klick) löst eine Anfrage per JavaScript aus
2. Der Server schickt Daten zurück
3. JavaScript verarbeitet die Antwort und aktualisiert die Seite gezielt

Modernes AJAX mit der Fetch API

Beispiel mit async/await:

async function fetchUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (!response.ok) throw new Error('Fehler beim Laden der Daten');
    const data = await response.json();
    document.getElementById('result').textContent = data.name;
  } catch (error) {
    console.error('Fehler:', error);
  }
}
fetchUser();

Typische Anwendungsfälle

• Formulare absenden, ohne zu neuladen
• Listen oder Inhalte nachladen (z.B. “Mehr laden”-Button)
• Live-Suche während der Eingabe

Zusammenfassung

AJAX ermöglicht dynamische, schnelle Webanwendungen und ist die Basis für viele moderne Funktionen – am einfachsten umgesetzt mit der Fetch API und async/await. Im MERN-Stack werden damit Daten zwischen Frontend und Backend ausgetauscht.