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

Давайте теперь посмотрим, как подгрузить часть страницы с помощью AJAX. Пусть на нашей странице index.html будет расположен див и кнопка (здесь показано содержимое body):

public/index.html<div></div>
<button>click me</button>

Пусть у нас также есть страница ajax.html, на которой расположены три абзаца (без тегов страницы, просто абзацы):

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

Давайте сделаем так, чтобы по клику на кнопку на странице index.html в див подгрузилось содержимое страницы ajax.html.

Для этого для начала получим в переменные ссылки на наши элементы:

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

Давайте навесим на кнопку обработчик клика:

public/client.jsbutton.addEventListener('click', function() {
  // тут будем выполнять AJAX запрос
});

Давайте теперь выполним AJAX запрос. Для этого используется функция fetch, параметром получающая адрес страницы, содержимое которой мы хотим получить. Укажем адрес страницы ajax.html на нашем сервере:

public/client.jsbutton.addEventListener('click', function() {
  let result = fetch('/ajax.html'); 
});

Своим результатом fetch вернет промис. Дело в том, что запрос страницы через AJAX - это асинхронная операция, ведь пройдет некоторое время, через которое страница нам ответит.

Давайте получим результат промиса:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // ответ сервера лежит в переменной response
  });
});

Упростим, избавившись от лишней переменной:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(function(response) {
    
  });
});

Упростим, воспользовавшись стрелочной функцией:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    
  });
});

Представим в более читаемом виде:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      
    }
  );
});

В переменной response содержится достаточно сложный объект класса Response:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // объект класса Response
  });
});

Глубоко этот объект мы будем изучать в следующих уроках, а пока нам нужно самое простое - получить текст запрошенной страницы. Для этого в этом объекте существует метод text. Этот метод, однако, возвращает не текст страницы, а промис с ее текстом:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // выведет Promise
    }
  );
});

Чтобы добраться до текста страницы, необходимо промис, полученный из response.text, обработать еще раз:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // текст страницы
    }
  );
});

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

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