Základy práce s fetch v AJAX

Pojďme se nyní podívat, jak načíst část stránky pomocí AJAX. Nechť na naší stránce index.html je umístěn div a tlačítko (zde je zobrazen obsah body):

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

Nechť máme také stránku ajax.html, na které jsou umístěny tři odstavce (bez tagů stránky, pouze odstavce):

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

Udělejme to, aby po kliknutí na tlačítko na stránce index.html se do div načetl obsah stránky ajax.html.

K tomu nejprve získáme do proměnných odkazy na naše elementy:

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

Nastavme na tlačítko obslužnou rutinu kliknutí:

button.addEventListener('click', function() {
	// zde budeme provádět AJAX požadavek
});

Nyní provedeme AJAX požadavek. K tomu se používá funkce fetch, jejímž parametrem je adresa stránky, jejíž obsah chceme získat. Uveďme adresu stránky ajax.html na našem serveru:

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

Výsledkem fetch bude promise. Jde o to, že požadavek na stránku přes AJAX - je asynchronní operace, protože uběhne nějaký čas, než nám stránka odpoví.

Získejme výsledek promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// odpověď serveru je v proměnné response
	});
});

Zjednodušme tím, že se zbavíme nadbytečné proměnné:

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

Zjednodušme pomocí šipkové funkce:

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

Uveďme v čitelnější podobě:

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

V proměnné response je obsažen dost složitý objekt třídy Response:

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

Tento objekt budeme podrobně studovat v následujících lekcích, zatím potřebujeme to nejjednodušší - získat text požadované stránky. K tomu v tomto objektu existuje metoda text. Tato metoda však nevrací text stránky, ale promise s jejím textem:

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

Abyste se dostali k textu stránky, je nutné promise získaný z response.text zpracovat znovu:

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

Takže jsme konečně získali text požadované stránky a můžeme jej například zapsat do našeho div:

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

Jsou dána tři tlačítka a div. Na serveru jsou dány tři stránky. Zařiďte, aby každé z tlačítek načetlo do div příslušnou stránku.

Nechť na serveru je pět stránek. Nechť první stisknutí tlačítka načte první stránku, druhé stisknutí - druhou, a tak dokud stránky nedojdou.