Введение в AJAX

AJAX - мечта разработчика, потому что вы можете:

  • Обновление веб-страницы без перезагрузки страницы
  • Запрос данных с сервера после загрузки страницы
  • Получение данных с сервера после загрузки страницы
  • Отправка данных на сервер в фоновом режиме

Пример AJAX

Нажмите на кнопку ниже, чтобы Ajax изменил этот текст:

Попробуйте сами

Объяснение примера AJAX

HTML-страница

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Позвольте AJAX изменить этот текст</h2>
  <button type="button" onclick="loadDoc()">Изменить текст</button>
</div>
</body>
</html>

Эта HTML-страница содержит <div> и <button>.

<div> Для отображения информации с сервера.

<button> Вызов функции (при нажатии).

Эта функция запрашивает данные с веб-сервера и отображает их:

Функция loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Что такое AJAX?

AJAX = Asynchronous JvaScript And XML.

AJAX не является языком программирования.

AJAX просто комбинирует:

  • Встроенный в браузер объект XMLHttpRequest (запрос данных с веб-сервера)
  • JavaScript и HTML DOM (дисплеи или использование данных)

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

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

Как работает AJAX

AJAX
  1. Происходит событие в веб-странице (загрузка страницы, нажатие кнопки)
  2. Объект XMLHttpRequest создается JavaScript
  3. Объект XMLHttpRequest отправляет запрос веб-серверу
  4. Сервер обрабатывает запрос
  5. Сервер отправляет ответ обратно на веб-страницу
  6. Ответ читается JavaScript
  7. Правильные действия выполняемые JavaScript (например, обновление страницы)