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?
Abschnitt betitelt „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
Abschnitt betitelt „Vorteile von AJAX“- Verbesserte Nutzererfahrung (keine kompletten Seitenneuladungen)
- Schnellere Reaktionen, weniger unnötige Datenübertragung
- Inhalte werden gezielt und dynamisch nachgeladen
AJAX-Ablauf
Abschnitt betitelt „AJAX-Ablauf“- Ein Ereignis (z.B. Button-Klick) löst eine Anfrage per JavaScript aus
- Der Server schickt Daten zurück
- JavaScript verarbeitet die Antwort und aktualisiert die Seite gezielt
Modernes AJAX mit der Fetch API
Abschnitt betitelt „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
Abschnitt betitelt „Typische Anwendungsfälle“- Formulare absenden, ohne zu neuladen
- Listen oder Inhalte nachladen (z.B. “Mehr laden”-Button)
- Live-Suche während der Eingabe
Zusammenfassung
Abschnitt betitelt „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.
Danke für Ihr Feedback!