Základy práce s fetch v AJAX

Pozrime sa teraz, ako načítať časť stránky pomocou AJAX. Nech na našej stránke index.html je umiestnený div a tlačidlo (tu je zobrazený obsah body):

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

Nech máme tiež stránku ajax.html, na ktorej sú umiestnené tri odseky (bez značiek stránky, jednoducho odseky):

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

Urobme tak, aby po kliknutí na tlačidlo na stránke index.html sa do div načítal obsah stránky ajax.html.

Na to najprv získajme do premenných odkazy na naše elementy:

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

Pridajme na tlačidlo obsluhu kliknutia:

button.addEventListener('click', function() {
	// tu vykonáme AJAX požiadavku
});

Vykonajme teraz AJAX požiadavku. Na to sa používa funkcia fetch, ktorá ako parameter dostáva adresu stránky, ktorej obsah chceme získať. Zadajme adresu stránky ajax.html na našom serveri:

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

Výsledkom fetch vráti promise. Vec sa má tak, že požiadavka stránky cez AJAX je asynchrónna operácia, pretože uplynie nejaký čas, kým nám stránka odpovie.

Získajme výsledok promisu:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// odpoveď servera je v premennej response
	});
});

Zjednodušme, zbavme sa nadbytočnej premennej:

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

Zjednodušme, použitím šípkovej funkcie:

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

Prezentujme v čitateľnejšej podobe:

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

V premennej response je obsiahnutý dosť zložitý objekt triedy Response:

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

Tento objekt budeme hlbšie študovať v nasledujúcich lekciách, zatiaľ potrebujeme najjednoduchšie - získať text požadovanej stránky. Na to v tomto objekte existuje metóda text. Táto metóda však nevracia text stránky, ale promis s jej textom:

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

Aby sme sa dostali k textu stránky, je potrebné promis získaný z response.text spracovať ešte raz:

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

Takže, konečne sme získali text požadovanej stránky a môžeme ho napríklad zapísať do nášho div:

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

Sú dané tri tlačidlá a div. Na serveri sú dané tri stránky. Urobte tak, aby každé z tlačidiel načítalo do div príslušnú stránku.

Nech na serveri je päť stránok. Nech prvé kliknutie na tlačidlo načíta prvú stránku, druhé kliknutie - druhú, a tak ďalej, kým stránky neskončia.