6.5. Основы JavaScript: Асинхронные Сетевые запросы с AJAX/Fetch

Содержание статьи:

 

AJAX (Asynchronous JavaScript and XML)

Что такое AJAX?

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

Приведем простой пример. Представьте, у вас есть веб-страница с кнопкой "Загрузить информацию", и вы хотите загрузить текстовую информацию с сервера без перезагрузки страницы.

Так выглядит файл HTML:

<html> <head>  <title>AJAX</title></head><body>  <button id="download">Загрузить информацию</button>  <div id="result"></div>  <script src="/ajax.js"></script></body></html>

 

Так выглядит файл JavaScript (ajax.js):

// Находим элементы на страницеlet downloadButton = document.getElementById("download");let result = document.getElementById("result");
// Добавляем обработчик события на кнопкуdownloadButton.addEventListener("click", function() {
  // Создаем объект для отправки запроса  let requestToServer = new XMLHttpRequest();
  // Настраиваем запрос  requestToServer.open("GET", "сервер/путь/к/информации.txt", true);
  // Устанавливаем обработчик события для завершения запроса  requestToServer.onload = function() {    if (requestToServer.status >= 200 && requestToServer.status < 400) {
      // Обновляем содержимое на странице      result.textContent = requestToServer.responseText;    } else {      result.textContent = "Ошибка при загрузке данных.";    }  };
  // Отправляем запрос  requestToServer.send();});

 

Fetch

Что такое Fetch?

Fetch - это современный стандарт для выполнения сетевых запросов в браузере. Он предоставляет более удобный и гибкий интерфейс для работы с запросами и ответами.

Рассмотрим пример с Fetch на основе предыдущего примера, однако в этом раз с удаленного сервера скрипт загрузит JSON данные.

Файл HTML:

<html>    <head>       <title>Fetch</title>    </head>    <body>        <button id="download">Загрузить информацию</button>        <div id="result"></div>        <script src="/fetch.js"></script>    </body></html>

 

Файл JavaScript (fetch.js):

// Находим элементы на страницеlet downloadButton = document.getElementById("download");let result = document.getElementById("result");
// Добавляем обработчик события на кнопкуdownloadButton.addEventListener("click", function() {
  // Отправляем GET запрос с использованием Fetch  fetch("сервер/путь/к/данным.json")    .then(response => response.json())    .then(data => {
      // Обновляем содержимое на странице      result.textContent = "Имя: " + data.name + ", Возраст: " + data.age;    })    .catch(error => {      result.textContent = "Ошибка при загрузке данных.";    });});

В этом примере мы используем Fetch API для отправки GET запроса и получения JSON данных с сервера. Полученные данные обрабатываются и выводятся на странице.

Обе технологии, AJAX и Fetch, позволяют вам взаимодействовать с сервером и обновлять содержимое веб-страницы без перезагрузки. Fetch является более современным и удобным способом для выполнения сетевых запросов, но оба метода могут быть полезными в различных сценариях.

На этом мы заканчиваем уроки по основам JavaScript. Я постарался сделать уроки краткими и в то же время понятными и содержательными, чтобы охватить многие темы, связанные с уязвимостью XSS. В последующих уроках будут также даваться дополнительные сведения о JavaScript, а также понятные описания к коду.