AJAX: технология, ускоряющая загрузку веб-страниц

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

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

Пример кода AJAX:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xmlhttp.open("GET", "demo.php", true);
xmlhttp.send();

• Первые три строки кода создают новый экземпляр объекта XMLHttpRequest.
• Строка 5 - создание функции обратного вызова (callback), которая вызывается каждый раз, когда состояние объекта XMLHttpRequest изменяется.
• Строка 6 - проверяет, что состояние объекта XMLHttpRequest равно 4 и статус запроса - 200 (OK).
• Строка 7 - обновляет содержимое элемента с идентификатором "demo" на полученное значение с сервера.
• Строка 9 - открывает запрос, передавая в качестве параметров тип запроса, URL и флаг асинхронности.
• Строка 10 - отправляет запрос на сервер.

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

function changeText() {
  var xmlhttp = new XMLHttpRequest();
  var input = document.getElementById("input").value;
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET", "demo.php?input=" + input, true);
  xmlhttp.send();
}

• Строка 2 - объявление новой функции changeText().
• Строка 3 - создание нового объекта XMLHttpRequest.
• Строка 4 - получение значения поля формы с идентификатором "input".
• Строки 5-9 - создание функции обратного вызова.
• Строка 10 - открытие нового запроса на сервер и передача значения поля в качестве параметра "input".
• Строка 11 - отправка запроса на сервер.

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