Ajax: загрузка данных без перезагрузки страницы

Ajax — подход к обмену данными между браузером и сервером без полной перезагрузки документа, а не библиотека, которую обязательно подключать. Для простого запроса достаточно встроенного fetch.

Кнопка и результат

<button id="load" type="button">Загрузить данные</button>
<p id="result" role="status"></p>

JavaScript

const button = document.querySelector("#load");
const result = document.querySelector("#result");
button.addEventListener("click", async () => {
  button.disabled = true;
  result.textContent = "Загрузка…";
  try {
    const response = await fetch("/api/message");
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    result.textContent = String(data.message ?? "Нет сообщения");
  } catch {
    result.textContent = "Не удалось загрузить данные";
  } finally {
    button.disabled = false;
  }
});

Размещайте этот код после элементов или загружайте внешний скрипт с defer. Сервер /api/message должен вернуть JSON, например {"message":"Готово"}. На статическом сервере такой endpoint сам не появится.

Проверка

Откройте страницу по HTTP и проверьте успех,404, неверный JSON и отказ сети. fetch не отвергает Promise только из-за404, поэтому нужна response.ok. Для другого origin сервер должен правильно разрешать CORS; отключать защиту браузера для этого не требуется.

В примере используется textContent: недоверенный ответ не вставляется через innerHTML или jQuery.html. Если проект уже использует jQuery, тот же жизненный цикл реализуется через $.ajax, но смысл проверок остаётся прежним.