Основе рада са fetch у AJAX-у

Хајде сада да погледамо како да учитамо део странице помоћу AJAX-а. Нека на нашој страници index.html буду смештени див и дугме (овде је приказан садржај body):

<div></div>
<button>кликни ме</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 ће вратити обећање (promise). Ствар је у томе да је захтев странице преко 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. Овај метод, међутим, не враћа текст странице, већ обећање (promise) са њеним текстом:

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;
		}
	);
});

Дата су три дугмета и див. На серверу су дате три странице. Направите тако да свако од дугмића учита у див одговарајућу страницу.

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