Grundläggande arbete med fetch i AJAX

Låt oss nu titta på hur man laddar en del av en sida med AJAX. Låt på vår sida index.html finnas en div och en knapp (här visas innehållet i body):

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

Låt oss också ha en sida ajax.html, som innehåller tre stycken (utan sidtaggar, bara stycken):

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

Låt oss göra så att när man klickar på knappen på sidan index.html laddas innehållet på sidan ajax.html in i div:en.

För att göra detta, låt oss först få referenser till våra element i variabler:

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

Låt oss lägga till en klickhanterare på knappen:

button.addEventListener('click', function() {
	// här kommer vi att utföra AJAX-förfrågan
});

Låt oss nu utföra en AJAX-förfrågan. För detta används funktionen fetch, som tar adressen till sidan vars innehåll vi vill få som parameter. Låt oss ange adressen till sidan ajax.html på vår server:

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

fetch kommer att returnera ett promise som resultat. Saken är den att en förfrågan om en sida via AJAX är en asynkron operation, eftersom det kommer att gå någon tid innan sidan svarar oss.

Låt oss få resultatet av promiset:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// serverns svar finns i variabeln response
	});
});

Låt oss förenkla genom att ta bort den onödiga variabeln:

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

Låt oss förenkla genom att använda en pilfunktion:

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

Låt oss presentera det i en mer lättläst form:

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

I variabeln response finns ett ganska komplext objekt av klassen Response:

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

Vi kommer att studera detta objekt mer ingående i kommande lektioner, men just nu behöver vi det enklaste - få texten på den efterfrågade sidan. För detta finns metoden text i detta objekt. Denna metod returnerar dock inte sidans text, utan ett promise med dess text:

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

För att komma åt sidans text måste promiset som erhållits från response.text behandlas en gång till:

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

Så, vi har äntligen fått texten på den efterfrågade sidan och kan till exempel skriva den till vår div:

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

Det finns tre knappar och en div. På servern finns tre sidor. Gör så att varje knapp laddar motsvarande sida i div:en.

Låt det finnas fem sidor på servern. Låt det första klicket på knappen ladda den första sidan, det andra klicket den andra, och så vidare tills sidorna tar slut.