Darba ar fetch pamati AJAX

Tagad apskatīsim, kā ielādēt daļu lapas, izmantojot AJAX. Pieņemsim, ka mūsu lapā index.html atrodas div un poga (šeit parādīts body saturs):

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

Pieņemsim, ka mums ir arī lapa ajax.html, kurā atrodas trīs rindkopas (bez lapas tagiem, tikai rindkopas):

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

Izveidosim tā, lai, noklikšķinot uz pogas lapā index.html, div tiek ielādēts lapas ajax.html saturs.

Lai to izdarītu, vispirms iegūstam mainīgajos atsauces uz mūsu elementiem:

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

Pievienosim pogai klikšķa notikumu apstrādi:

button.addEventListener('click', function() {
	// šeit veiksim AJAX pieprasījumu
});

Tagad veiksim AJAX pieprasījumu. Šim nolūkam tiek izmantota funkcija fetch, kuras parametrā ir lapas adrese, kuras saturu mēs vēlamies iegūt. Norādīsim lapas adresi ajax.html uz mūsu servera:

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

fetch atgriezīs kā rezultātu promisu. Lieta tāda, ka lapas pieprasījums, izmantojot AJAX, - ir asinhrona operācija, jo paiet zināms laiks, pēc kura lapa mums atbildēs.

Iegūsim promisa rezultātu:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// servera atbilde atrodas mainīgajā response
	});
});

Vienkāršosim, atbrīvojoties no liekā mainīgā:

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

Vienkāršosim, izmantojot bulta funkciju:

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

Attēlosim lasāmākā veidā:

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

Mainīgajā response atrodas pietiekami sarežģīts klases Response objekts:

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

Šo objektu mēs dziļi pētīsim nākamajās nodarbībās, bet pagaidām mums vajag visvienkāršāko - iegūt pieprasītās lapas tekstu. Šim nolūkam šajā objektā pastāv metode text. Šī metode tomēr atgriež nevis lapas tekstu, bet promisu ar tās tekstu:

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

Lai iegūtu lapas tekstu, nepieciešams promisu, kas iegūts no response.text, apstrādāt vēlreiz:

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

Tātad, mēs beidzot esam saņēmuši pieprasītās lapas tekstu un varam, piemēram, ierakstīt to mūsu div:

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

Ir dotas trīs pogas un div. Serverī ir dotas trīs lapas. Izveidojiet tā, lai katra no pogām ielādētu div atbilstošo lapu.

Pieņemsim, ka serverī ir piecas lapas. Lai pirmais nospiešana uz pogas ielādē pirmo lapu, otrais nospiešana - otro, un tā tālāk, līdz lapas beigsies.