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

Нека сега видим как да заредим част от страницата с помощта на AJAX. Нека на нашата страница index.html се намира div и бутон (тук е показано съдържанието на body):

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

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

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

Нека направим така, че при кликване на бутона на страницата index.html в div да се зареди съдържанието на страницата 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); // текстът на страницата
		}
	);
});

И така, най-накрая получихме текста на заявената страница и можем, например, да го запишем в нашия div:

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

Дадени са три бутона и div. На сървъра са дадени три страници. Направете така, че всеки от бутоните да зарежда в div съответната страница.

Нека на сървъра има пет страници. Нека първото натискане на бутона зарежда първата страница, второто натискане - втората, и така нататък, докато страниците не свършат.