Pagrindai dirbant su fetch AJAX

Dabar pažiūrėkime, kaip iš dalies įkelti puslapį naudojant AJAX. Tarkime, mūsų puslapyje index.html yra išdėstytas div ir mygtukas (čia parodyta body turinys):

<div></div>
<button>spausk mane</button>

Tarkime, kad taip pat turime puslapį ajax.html, kuriame yra išdėstytos trys pastraipos (be puslapio tagų, tiesiog pastraipos):

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

Padarykime taip, kad paspaudus mygtuką puslapyje index.html į div būtų įkeltas puslapio ajax.html turinys.

Norint tai padaryti, pirmiausia gaukime į kintamuosius nuorodas į mūsų elementus:

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

Uždėkime ant mygtuko paspaudimo apdorotoją:

button.addEventListener('click', function() {
	// čia atliksime AJAX užklausą
});

Dabar atlikime AJAX užklausą. Tam naudojama funkcija fetch, kuri parametru gauna puslapio adresą, kurio turinį norime gauti. Nurodykime puslapio adresą ajax.html mūsų serveryje:

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

Rezultatu fetch grąžins pažadą. Reikalas tas, kad puslapio užklausa per AJAX - tai asinchroninė operacija, nes praeis šiek tiek laiko, per kurį puslapis mums atsakys.

Gaukime pažado rezultatą:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// serverio atsakas yra kintamajame response
	});
});

Supaprastinkime, atsikratydami perteklinių kintamųjų:

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

Supaprastinkime, pasinaudoję rodykline funkcija:

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

Pateikime skaitomesne forma:

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

Kintamajame response yra pakankamai sudėtingas Response klasės objektas:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response klasės objektas
	});
});

Šį objektą išsamiai tyrinėsime kituose pamokose, o kol kas mums reikia paprasčiausio - gauti užklausto puslapio tekstą. Tam šiame objekte egzistuoja metodas text. Šis metodas, tačiau, grąžina ne puslapio tekstą, o pažadą su jos tekstu:

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

Norint pasiekti puslapio tekstą, būtina pažadą, gautą iš response.text, apdoroti dar kartą:

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

Taigi, mes pagaliau gavome užklausto puslapio tekstą ir galime, pavyzdžiui, įrašyti jį į mūsų div:

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

Duoti trys mygtukai ir div. Serveryje duoti trys puslapiai. Padarykite taip, kad kiekvienas mygtukas į div įkeltų atitinkamą puslapį.

Tarkime, serveryje yra penki puslapiai. Tegul pirmas paspaudimas ant mygtuko įkelia pirmą puslapį, antras paspaudimas - antrą, ir taip tol, kol puslapiai nesibaigs.