Что такое AJAX-запросы?

Asynchronous Javascript and XML(AJAX)

Тяжело вбить это в гугле и выбрать любую из триллиона статей и почитать?

Это способ передачи данных от клиента к серверу и наоборот без перезагрузки страницы. Примеров AJAX технологий очень много, например это могут быть Google карты, при каждом перемещении карты, сервис автоматически подгружает новые картографические данные без перезагрузки страницы.

Ответ подготовлен с помощью канала Академия сайтов

Ajax (Asynchronous JavaScript and XML) - это технология, которая позволяет обмениваться данными между сервером и клиентом без перезагрузки страницы. Ajax использует объект XMLHttpRequest для выполнения асинхронных HTTP-запросов к серверу и обычно используется в сочетании с JavaScript.

Вот простой пример использования Ajax для получения данных с сервера без перезагрузки страницы:

Создайте HTML-файл с кнопкой, которая будет отправлять запрос:

  
 
 
     
     
     
     
 
 
    Загрузить данные 
    
 
 
     
 
 
 

Создайте файл script.js с кодом для отправки Ajax-запроса:

 document.getElementById('load-data').addEventListener('click', loadData); 
 
function loadData() { 
  // Создаем новый объект XMLHttpRequest 
  const xhr = new XMLHttpRequest(); 
 
  // Открываем соединение с сервером через метод GET и указываем URL-адрес 
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true); 
 
  // Задаем тип ответа сервера 
  xhr.responseType = 'json'; 
 
  // Отправляем запрос 
  xhr.send(); 
 
  // Событие, которое вызывается, когда статус запроса меняется 
  xhr.onreadystatechange = function () { 
    if (xhr.readyState === XMLHttpRequest.DONE) { 
      if (xhr.status === 200) { 
        // В случае успешного выполнения запроса, выводим результат 
        document.getElementById('result').innerHTML = JSON.stringify(xhr.response, null, 2); 
      } else { 
        // В случае ошибки, выводим сообщение об ошибке 
        document.getElementById('result').innerHTML = 'Ошибка: ' + xhr.status; 
      } 
    } 
  }; 
} 
 

В этом примере при нажатии на кнопку "Загрузить данные" выполняется Ajax-запрос к серверу. В случае успешного выполнения запроса, результат выводится на странице.

Обратите внимание, что в данном примере использован сервис jsonplaceholder.typicode.com для имитации работы с реальным сервером. Вам необходимо заменить URL на адрес вашего сервера или API, с которым вы хотите работать.

Помимо метода GET, вы можете использовать другие HTTP-методы (POST, PUT, DELETE и т.д.) в зависимости от операции, которую вы хотите выполнить на сервере.

Не забывает подписываться на канал Академия сайтов