Grunnleggende om fetch i AJAX

La oss nå se på hvordan vi kan laste inn en del av en side med AJAX. La det på vår side index.html være plassert en div og en knapp (her vises innholdet i body):

<div></div>
<button>klikk meg</button>

La oss også si at vi har en side ajax.html, som inneholder tre avsnitt (uten sidetagger, kun avsnitt):

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

La oss gjøre det slik at ved et klikk på knappen på siden index.html, lastes innholdet fra siden ajax.html inn i diven.

For å gjøre dette, la oss først hente referansene til elementene våre inn i variabler:

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

La oss legge en klikk-håndterer på knappen:

button.addEventListener('click', function() {
	// her skal vi utføre AJAX-forespørselen
});

La oss nå utføre AJAX-forespørselen. For dette brukes funksjonen fetch, som tar adressen til siden vi vil hente innholdet fra som parameter. La oss spesifisere adressen til siden ajax.html på serveren vår:

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

fetch vil returnere et promise. Saken er at en forespørsel om en side via AJAX er en asynkron operasjon, fordi det vil ta litt tid før siden svarer oss.

La oss hente resultatet fra promise-et:

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

La oss forenkle ved å fjerne den unødvendige variabelen:

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

La oss forenkle ved å bruke pilfunksjon:

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

La oss presentere det på en mer lesbar måte:

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

I variabelen response finnes et ganske komplekst objekt av klassen Response:

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

Vi skal studere dette objektet grundigere i de følgende leksjonene, men foreløpig trenger vi det enkleste - å hente teksten fra den forespurte siden. For dette finnes det en metode text i dette objektet. Denne metoden returnerer imidlertid ikke selve teksten på siden, men et promise med teksten:

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

For å komme til teksten på siden, må promise-et, hentet fra response.text, behandles en gang til:

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

Så, vi har endelig fått teksten fra den forespurte siden og kan for eksempel skrive den inn i diven vår:

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

Det er gitt tre knapper og en div. På serveren er det gitt tre sider. Gjør slik at hver av knappene laster inn den tilsvarende siden i diven.

La det være fem sider på serveren. La det første klikket på knappen laste inn den første siden, det andre klikket - den andre, og så videre, til sidene er oppbrukt.