Osnove dela s fetch v AJAX

Poglejmo si zdaj, kako naložiti del strani z AJAX. Naj bo na naši strani index.html nameščen div in gumb (tukaj je prikazana vsebina body):

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

Naj imamo tudi stran ajax.html, na kateri so nameščeni trije odstavki (brez oznak strani, samo odstavki):

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

Naredimo tako, da ob kliku na gumb na strani index.html v div naloži vsebino strani ajax.html.

Za to najprej pridobimo v spremenljivke povezave na naše elemente:

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

Dodajmo gumbu obravnavalnik klika:

button.addEventListener('click', function() {
	// tukaj bomo izvedli AJAX zahtevek
});

Izvedimo zdaj AJAX zahtevek. Za to se uporablja funkcija fetch, ki kot parameter prejme naslov strani, katere vsebino želimo pridobiti. Določimo naslov strani ajax.html na našem strežniku:

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

Kot rezultat bo fetch vrnil promise. Stvar je v tem, da je zahteva strani prek AJAX-a asinhrona operacija, saj bo minil nekaj časa, preden nam stran odgovori.

Pridobimo rezultat promisa:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// odgovor strežnika je v spremenljivki response
	});
});

Poenostavimo, tako da se znebimo odvečne spremenljivke:

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

Poenostavimo z uporabo puščične funkcije:

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

Predstavimo v bolj berljivi obliki:

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

V spremenljivki response je vsebovan dokaj zapleten objekt razreda Response:

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

Ta objekt bomo podrobneje preučevali v naslednjih lekcijah, za zdaj pa potrebujemo najpreprostejše - pridobiti besedilo zahtevane strani. Za to v tem objektu obstaja metoda text. Vendar ta metoda ne vrne besedila strani, ampak promis z njenim besedilom:

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

Da pridemo do besedila strani, je treba promis, pridobljen iz response.text, obdelati še enkrat:

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

Torej, končno smo dobili besedilo zahtevane strani in ga lahko, na primer, zapišemo v naš div:

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

Podani so trije gumbi in div. Na strežniku so podane tri strani. Naredite tako, da vsak od gumbov naloži v div ustrezno stran.

Naj bo na strežniku pet strani. Naj prvi klik na gumb naloži prvo stran, drugi klik - drugo, in tako naprej, dokler se strani ne končajo.