Основи на работа со fetch во AJAX

Ајде сега да погледнеме како да вчитаме дел од страница со AJAX. Нека на нашата страница index.html се наоѓа див и копче (овде е прикажана содржината на body):

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

Нека имаме и страница ajax.html, на која се наоѓаат три параграфи (без тагови на страницата, само параграфи):

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

Ајде да направиме така што при клик на копчето на страницата index.html во див да се вчита содржината на страницата ajax.html.

За ова прво да ги добиеме во променливи референците на нашите елементи:

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

Ајде да додадеме обработувач за клик на копчето:

button.addEventListener('click', function() {
	// овде ќе го извршиме AJAX барањето
});

Ајде сега да го извршиме AJAX барањето. За ова се користи функцијата fetch, која како параметар го добива адресата на страницата, чија содржина сакаме да ја добиеме. Да ја наведеме адресата на страницата ajax.html на нашиот сервер:

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

Како резултат fetch ќе врати промис. Работата е што барањето на страница преку AJAX - ова е асинхрона операција, бидејќи ќе помине извесно време, по кое страницата ќе ни одговори.

Ајде да го добиеме резултатот од промисот:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// одговорот од серверот е во променливата response
	});
});

Да го поедноставиме, ослободувајќи се од вишокот променлива:

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

Да го поедноставиме, користејќи стрелкова функција:

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

Да го претставиме во почитлив вид:

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

Во променливата response се содржи доволно сложен објект од класа Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // објект од класа Response
	});
});

Овој објект длабоко ќе го проучуваме во следните лекции, а за сега ни треба најосновното - да го добиеме текстот на побараната страница. За ова во овој објект постои методот text. Овој метод, сепак, не го враќа текстот на страницата, туку промис со нејзиниот текст:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // ќе испечати Promise
		}
	);
});

За да дојдеме до текстот на страницата, потребно е промисот, добиен од response.text, да го обработиме уште еднаш:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // текстот на страницата
		}
	);
});

Значи, конечно го добивме текстот на побараната страница и можеме, на пример, да го запишеме во нашиот див:

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

Дадени се три копчиња и див. На серверот се дадени три страници. Направете така што секое од копчињата да вчитува во див соодветна страница.

Нека на серверот има пет страници. Нека првото притискање на копчето вчитува прва страница, второто притискање - втора, и така натаму, додека не се потрошат страниците.