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

Даны три кнопки и див. На сервере даны три страницы. Сделайте так, чтобы каждая из кнопок подгружала в див соответствующую страницу.

Пусть на сервере есть пять страниц. Пусть первое нажатие на кнопку подгружает первую страницу, второе нажатие - вторую, и так далее, пока страницы не закончатся.