Basiswerk met fetch in AJAX

Laten we nu eens kijken hoe we een deel van een pagina kunnen laden met behulp van AJAX. Stel dat op onze pagina index.html een div en een knop zijn geplaatst (hier wordt de inhoud van body getoond):

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

Stel dat we ook een pagina ajax.html hebben, waarop drie alinea's staan (zonder paginatags, gewoon alinea's):

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

Laten we ervoor zorgen dat bij een klik op de knop op de pagina index.html in de div de inhoud van de pagina ajax.html wordt geladen.

Om dit te doen, laten we eerst verwijzingen naar onze elementen in variabelen zetten:

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

Laten we een click event listener aan de knop toevoegen:

button.addEventListener('click', function() {
	// hier voeren we het AJAX verzoek uit
});

Laten we nu het AJAX verzoek uitvoeren. Hiervoor gebruiken we de functie fetch, die als parameter het adres van de pagina krijgt waarvan we de inhoud wil willen ontvangen. Laten we het adres van de pagina ajax.html op onze server opgeven:

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

fetch zal als resultaat een promise teruggeven. Het punt is dat een verzoek voor een pagina via AJAX een asynchrone operatie is, omdat het enige tijd zal duren voordat de pagina ons antwoordt.

Laten we het resultaat van de promise verkrijgen:

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

	promise.then(function(response) {
		// het antwoord van de server ligt in de variabele response
	});
});

Laten we het vereenvoudigen door de overbodige variabele weg te laten:

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

	});
});

Laten we het vereenvoudigen door gebruik te maken van een arrow functie:

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

	});
});

Laten we het in een beter leesbare vorm presenteren:

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

		}
	);
});

De variabele response bevat een behoorlijk complex object van de klasse Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // object van de klasse Response
	});
});

We zullen dit object in de komende lessen diepgaand bestuderen, maar voor nu hebben we het eenvoudigste nodig - de tekst van de opgevraagde pagina verkrijgen. Hiervoor bestaat er in dit object een methode text. Deze methode retourneert echter niet de tekst van de pagina, maar een promise met de tekst ervan:

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

Om bij de paginatekst te komen, is het nodig de promise, verkregen uit response.text, opnieuw te verwerken:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // de tekst van de pagina
		}
	);
});

Dus, we hebben eindelijk de tekst van de opgevraagde pagina ontvangen en kunnen deze bijvoorbeeld in onze div plaatsen:

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

Er zijn drie knoppen en een div gegeven. Op de server zijn drie pagina's gegeven. Zorg ervoor dat elke knop de bijbehorende pagina in de div laadt.

Stel dat er vijf pagina's op de server zijn. Laat de eerste klik op de knop de eerste pagina laden, de tweede klik - de tweede, en zo verder, totdat de pagina's op zijn.