Grundlagen der Arbeit mit fetch in AJAX

Schauen wir uns nun an, wie ein Teil einer Seite mit AJAX nachgeladen werden kann. Angenommen, auf unserer Seite index.html befinden sich ein Div und ein Button (hier ist der Inhalt von body gezeigt):

<div></div>
<button>click me</button>

Angenommen, wir haben auch eine Seite ajax.html, auf der drei Absätze stehen (ohne Seiten-Tags, einfach nur Absätze):

<p>1</p>
<p>2</p>
<p>3</p>

Lassen Sie uns Folgendes erreichen: Bei einem Klick auf den Button auf der Seite index.html soll der Inhalt der Seite ajax.html in das Div geladen werden.

Dazu holen wir zunächst Referenzen auf unsere Elemente in Variablen:

let div    = document.querySelector('div');
let button = document.querySelector('button');

Fügen wir dem Button einen Klick-Handler hinzu:

button.addEventListener('click', function() {
	// hier führen wir die AJAX-Anfrage aus
});

Führen wir nun die AJAX-Anfrage aus. Dafür wird die Funktion fetch verwendet, die als Parameter die Adresse der Seite erhält, deren Inhalt wir abrufen möchten. Geben wir die Adresse der Seite ajax.html auf unserem Server an:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html');
});

Als Ergebnis gibt fetch ein Promise zurück. Die Sache ist die: Das Anfordern einer Seite über AJAX ist ein asynchroner Vorgang, denn es wird einige Zeit vergehen, bis die Seite uns antwortet.

Holen wir uns das Ergebnis des Promises:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html');

	promise.then(function(response) {
		// die Antwort des Servers liegt in der Variable response
	});
});

Vereinfachen wir, indem wir die überflüssige Variable entfernen:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {

	});
});

Vereinfachen wir durch Verwendung einer Pfeilfunktion:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {

	});
});

Stellen wir es in einer besser lesbaren Form dar:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {

		}
	);
});

In der Variable response ist ein ziemlich komplexes Objekt der Klasse Response enthalten:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Objekt der Klasse Response
	});
});

Dieses Objekt werden wir in den folgenden Lektionen vertieft studieren, aber vorerst brauchen wir das Einfachste - den Text der angefragten Seite zu erhalten. Dafür gibt es in diesem Objekt die Methode text. Diese Methode gibt jedoch nicht den Text der Seite zurück, sondern ein Promise mit ihrem Text:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // gibt Promise aus
		}
	);
});

Um an den Text der Seite zu gelangen, muss das Promise, das aus response.text erhalten wurde, noch einmal verarbeitet werden:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // Text der Seite
		}
	);
});

Also haben wir endlich den Text der angefragten Seite erhalten und können ihn beispielsweise in unser Div schreiben:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

Gegeben sind drei Buttons und ein Div. Auf dem Server sind drei Seiten gegeben. Sorgen Sie dafür, dass jeder der Buttons die entsprechende Seite in das Div lädt.

Angenommen, auf dem Server gibt es fünf Seiten. Sorgen Sie dafür, dass der erste Klick auf den Button die erste Seite lädt, der zweite Klick - die zweite, und so weiter, bis die Seiten zu Ende sind.