Fetchi töötamise põhitõed AJAX-is

Vaatame nüüd, kuidas saab lehe osa AJAXi abil laadida. Oletame, et meie lehel index.html on div ja nupp (siin on näidatud body sisu):

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

Oletame, et meil on ka leht ajax.html, millel on kolm lõiku (ilma lehe siltideta, lihtsalt lõigud):

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

Teeme nii, et nupu vajutamisel lehel index.html laaditakse div-i lehe ajax.html sisu.

Selleks saame kõigepealt oma elementidele viited muutujatesse:

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

Lisame nupule klikirakenduri:

button.addEventListener('click', function() {
	// siin teostame AJAX päringu
});

Teostame nüüd AJAX päringu. Selleks kasutatakse funktsiooni fetch, mis parameetrina saab aadressi lehele, mille sisu me soovime saada. Määrame oma serveril asuva lehe ajax.html aadressi:

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

fetch tagastab tulemusena promisi. Asi on selles, et lehe pärimine AJAXi kaudu on asünkroonne tehe, sest möödub mõni aeg, mille jooksul leht meile vastab.

Saame promisi tulemuse:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// serveri vastus on muutujas response
	});
});

Lihtsustame, vabanedes lisamuutujast:

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

Lihtsustame, kasutades noolfunktsiooni:

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

Esitame loetavamal kujul:

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

Muutujas response on piisavalt keeruline Response klassi objekt:

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

Me uurime seda objekti sügavuti järgmistes õppetundides, kuid praegu vajame kõige lihtsamat - saada päritud lehe tekst. Selleks on selles objektis olemas meetod text. See meetod aga ei tagasta lehe teksti, vaid promisi selle tekstiga:

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

Lehe teksti saamiseks on vaja promisi, mis saadi response.text-ist, töödelda uuesti:

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

Niisiis, saime lõpuks päritud lehe teksti ja võime selle näiteks oma div-i kirjutada:

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

Antud on kolm nuppu ja div. Serveris on antud kolm lehte. Tehke nii, et iga nupp laadiks div-i vastava lehe.

Oletame, et serveris on viis lehte. Oletame, et esimene nupu vajutus laadib esimese lehe, teine vajutus - teise, ja nii edasi, kuni lehed otsa saavad.