Osnove rada sa fetch u AJAX-u

Hajde sada da pogledamo kako da delimično učitamo stranicu pomoću AJAX-a. Pretpostavimo da se na našoj stranici index.html nalazi div i dugme (ovde je prikazan sadržaj body):

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

Pretpostavimo da takođe imamo stranicu ajax.html, na kojoj se nalaze tri pasusa (bez tagova stranice, samo pasusi):

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

Hajde da postavimo tako da klikom na dugme na stranici index.html u div se učita sadržaj stranice ajax.html.

Za ovo prvo ćemo dobiti reference na naše elemente u promenljive:

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

Hajde da dodamo osluškivač za klik na dugme:

button.addEventListener('click', function() {
	// ovde ćemo izvršiti AJAX zahtev
});

Hajde sada da izvršimo AJAX zahtev. Za ovo se koristi funkcija fetch, koja kao parametar prima adresu stranice čiji sadržaj želimo da dobijemo. Navedimo adresu stranice ajax.html na našem serveru:

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

Kao svoj rezultat fetch će vratiti promis. Stvar je u tome što je zahtev stranice preko AJAX-a - asinhrona operacija, pošto će proći izvesno vreme pre nego što stranica odgovori.

Hajde da dobijemo rezultat promisa:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// odgovor servera se nalazi u promenljivoj response
	});
});

Pojednostavimo, otklanjajući suvišnu promenljivu:

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

Pojednostavimo, koristeći streličastu funkciju:

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

Predstavimo u čitljivijem obliku:

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

U promenljivoj response se nalazi dovoljno kompleksan objekat klase Response:

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

Ovaj objekat ćemo detaljnije proučavati u sledećim lekcijama, a za sada nam je potrebno najjednostavnije - da dobijemo tekst tražene stranice. Za ovo u ovom objektu postoji metod text. Ovaj metod, međutim, ne vraća tekst stranice, već promis sa njenim tekstom:

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

Da bismo došli do teksta stranice, potrebno je da promis, dobijen iz response.text, obradimo još jednom:

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

Dakle, konačno smo dobili tekst tražene stranice i možemo, na primer, da ga upišemo u naš div:

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

Data su tri dugmeta i div. Na serveru su date tri stranice. Uredite tako da svako od dugmadi učitava u div odgovarajuću stranicu.

Pretpostavimo da na serveru postoji pet stranica. Neka prvi pritisak na dugme učita prvu stranicu, drugi pritisak - drugu, i tako dok se stranice ne potroše.