Асновы работы з 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;
		}
	);
});

Даны тры кнопкі і дзів. На серверы даны тры старонкі. Зрабіце так, каб кожная з кнопак падгружала ў дзів адпаведную старонку.

Хай на серверы ёсць пяць старонак. Хай першае націсканне на кнопку падгружае першую старонку, другое націсканне - другую, і так далей, пакуль старонкі не скончацца.