Grundlæggende arbejde med fetch i AJAX

Lad os nu se på, hvordan man indlæser en del af en side med AJAX. Lad på vores side index.html være placeret en div og en knap (her vises indholdet af body):

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

Lad os også have en side ajax.html, hvor der er placeret tre afsnit (uden side-tags, blot afsnit):

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

Lad os gøre det sådan, at ved klik på knappen på siden index.html i div'en indlæses indholdet af siden ajax.html.

For at gøre dette, lad os først få referencer til vores elementer i variabler:

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

Lad os tilføje en klik-håndtering til knappen:

button.addEventListener('click', function() {
	// her vil vi udføre AJAX-forespørgsel
});

Lad os nu udføre en AJAX-forespørgsel. Til dette bruges funktionen fetch, som modtager adressen på den side, hvis indhold vi ønsker at hente. Lad os angive adressen på siden ajax.html på vores server:

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

fetch vil returnere et promise. Sagen er, at en forespørgsel om en side via AJAX - er en asynkron operation, for der vil gå noget tid, før siden svarer os.

Lad os få resultatet af promise'et:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// serverens svar ligger i variablen response
	});
});

Lad os forenkle ved at fjerne den unødvendige variabel:

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

Lad os forenkle ved at bruge en pilfunktion:

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

Lad os præsentere det i en mere læsbar form:

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

I variablen response indeholdes et ret komplekst objekt af klassen Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // objekt af klassen Response
	});
});

Vi vil studere dette objekt dybt i de følgende lektioner, men lige nu har vi brug for det mest simple - at få teksten fra den anmodede side. Til dette findes der i dette objekt en metode text. Denne metode returnerer dog ikke sidens tekst, men et promise med dens tekst:

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

For at komme til sidens tekst, er det nødvendigt at behandle promise'et, der er opnået fra response.text, endnu en gang:

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

Så vi har endelig fået teksten fra den anmodede side og kan for eksempel skrive den til vores div:

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

Der er givet tre knapper og en div. På serveren er der givet tre sider. Gør sådan, at hver af knapperne indlæser den tilsvarende side i div'en.

Lad der på serveren være fem sider. Lad det første tryk på knappen indlæse den første side, det andet tryk - den anden, og så videre, indtil siderne er udtømt.