АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗jsSpAXFt 244 of 294 menu
Бесплатная Тренировка Верстки. Приглашаются желающие поверстать!

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

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

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

enru