Minimalbeispiel für eine AJAX-Anfrage
January 2, 2015
Dieses Dokument zeigt ein grundlegendes Beispiel, wie man per Klick auf einen Link den Inhalt einer Textdatei asynchron in eine Webseite lädt, ohne einen vollständigen Seiten-Neuladung auszulösen. Es werden sowohl die moderne Fetch API als auch die veraltete XMLHttpRequest (XHR)-Methode demonstriert.
Die HTML-Struktur
Die index.html enthält einen Link zum Auslösen der Anfrage und ein <pre>-Element, in das der Inhalt geladen wird.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Einfaches AJAX-Beispiel</title>
</head>
<body>
<h1>Minimales AJAX-Beispiel</h1>
<a href="ajax.txt" id="load-link">Lade Inhalt aus ajax.txt</a>
<pre id="output-container"></pre>
<script src="main.js"></script>
</body>
</html>
Die Zieldatei
Die ajax.txt enthält den Text, der nachgeladen werden soll.
Die AJAX-Anfrage war erfolgreich, wenn dieser Text ohne einen Seiten-Neuladung geladen wurde.
JavaScript: Moderne Methode mit fetch()
Die Fetch API ist der moderne Standard für HTTP-Anfragen in JavaScript. Sie ist Promise-basiert und bietet eine saubere und flexible Syntax.
main.js (Fetch-Variante):
(function () {
const link = document.getElementById("load-link");
const output = document.getElementById("output-container");
// Fügt einen Event-Listener zum Link hinzu
link.addEventListener("click", function (event) {
// Verhindert die Standard-Navigation des Links
event.preventDefault();
fetch("ajax.txt")
.then(function (response) {
// Prüft, ob die HTTP-Anfrage erfolgreich war (Status 200-299)
if (!response.ok) {
throw new Error(`HTTP-Fehler! Status: ${response.status}`);
}
// Gibt den Textinhalt der Antwort zurück
return response.text();
})
.then(function (text) {
// Fügt den geladenen Text in das Ziel-Element ein
output.textContent = text;
})
.catch(function (error) {
// Behandelt Netzwerkfehler oder fehlgeschlagene Anfragen
output.textContent = `Fehler beim Laden: ${error.message}`;
});
});
})();
JavaScript: Veraltete Methode mit XMLHttpRequest (XHR)
XMLHttpRequest ist die ursprüngliche API für AJAX. Ihre Verwendung wird für neue Projekte nicht mehr empfohlen, ist aber für das Verständnis von Legacy-Code nützlich.
main.js (XHR-Variante):
(function () {
const link = document.getElementById("load-link");
const output = document.getElementById("output-container");
link.addEventListener("click", function (event) {
event.preventDefault();
// Erstellt ein neues XHR-Objekt
const xhr = new XMLHttpRequest();
// Konfiguriert die Anfrage
xhr.open("GET", "ajax.txt");
// Definiert den Callback, der bei erfolgreichem Abschluss ausgeführt wird
xhr.onload = function () {
if (xhr.status === 200) {
output.textContent = xhr.responseText;
} else {
output.textContent = `Fehler: HTTP-Status ${xhr.status}`;
}
};
// Definiert die Fehlerbehandlung für Netzwerkprobleme
xhr.onerror = function () {
output.textContent = "Ein Netzwerkfehler ist aufgetreten.";
};
// Sendet die Anfrage
xhr.send();
});
})();
Wichtige Hinweise
- Lokaler Webserver erforderlich: AJAX-Anfragen funktionieren aus Sicherheitsgründen nicht, wenn die HTML-Datei direkt über das
file://-Protokoll im Browser geöffnet wird. Sie müssen über einen Webserver (z.B.http://localhost) bereitgestellt werden. event.preventDefault(): Dieser Aufruf ist entscheidend, um zu verhindern, dass der Browser derhref-URL des Links folgt, was einen normalen Seiten-Neuladung auslösen würde.- Moderne Praxis: Die
fetch()-API in Kombination mit Promises oderasync/awaitist der heutige Standard für asynchrone Netzwerkanfragen.