Как реализовать подгрузку контента без перезагрузки страницы на javascript?

@stephon 

Существует несколько способов реализации подгрузки контента без перезагрузки страницы на JavaScript. Один из наиболее распространенных способов - это использование технологии AJAX.

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

Для реализации подгрузки контента с помощью AJAX нужно выполнить следующие шаги:

1. Создать объект XMLHttpRequest (XHR).

1

var xhr = new XMLHttpRequest();

1. Установить обработчик события onreadystatechange, который будет вызван при изменении состояния запроса.

1
2
3
4
5

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // Обработка ответа сервера
  }
};

1. Отправить запрос на сервер с помощью метода open() и send().

1
2

xhr.open('GET', 'url', true);
xhr.send();

1. В обработчике события onreadystatechange обработать ответ сервера и обновить контент на странице.

1
2
3
4

if (xhr.status === 200) {
  // Обработка ответа сервера
  document.getElementById('content').innerHTML = xhr.responseText;
}

Пример:

HTML:

1
2

<div id="content">Текст, который будет заменен при загрузке нового контента</div>
<button onclick="loadContent()">Загрузить контент</button>

JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function loadContent() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        document.getElementById('content').innerHTML = xhr.responseText;
      }
    }
  };
  xhr.open('GET', 'url-to-content', true);
  xhr.send();
}

В этом примере при нажатии на кнопку "Загрузить контент" будет отправлен запрос на сервер по адресу "url-to-content". При получении ответа от сервера контент в элементе с id="content" будет заменен на новый контент, полученный от сервера.