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

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

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

← →
↑
en ru