Что такое Ajax технология?

Февраль 17, 2016 Максим Метелев 8732 просмотров Комментариев нет

AJAX или асинхронный Javascript и XML – это ряд технологий, применяемых в веб-разработке, которые позволяют HTML-странице связываться с сервером без перезагрузки. Используя AJAX, приложения в Интернете смогут обмениваться данными с сервером без вмешательства в существующие веб-страницы. Однако, несмотря на то, что он используется для XML, для обмена данными лучше использовать JSON.

В компьютерном лексиконе слово «асинхронный» применяется к операциям, которые функционируют вне зависимости от других протекающих процессов. Именно поэтому веб-страница может отправить информацию серверу без перезагрузки. Если говорить конкретно, то в данном случае так называемый объект XMLHttpRequest, который фактически является интерфейсом, позволяет скриптам выполнять AJAX запросы.

Стоит понимать, что AJAX – это не одна технология, а целый ряд технологий, которые работают сообща для создания единого HTTP или HTTPS запроса. Создатель AJAX Дж. Гарретт под данным термином объединил следующие технологии:

HTML
CSS
Document Object Model
XML
XMLHttpRequest Object
Javascript

Как работает технология Ajax (Аякс)?

Принцип всей его работы можно увидеть на простой схеме:
Как работает Ajax

Крупные гиганты, такие как Google, Youtube, Gmail и Facebook используют активно эту технологию в своей работе, не перегружая серверы.

Примеры использования Ajax

Если говорить о примерах, как работает технология AJAX в WordPress, то можно вспомнить экран редактора записи, когда вы можете одновременно продолжать писать статью и добавить новую категорию, и при этом не требуется перезагрузка страницы.

Пример Ajax - добавление рубрики без перезагрузки страницы

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

Для полноты картины предлагаю ознакомиться с еще одним примером. Просто копируете и вставляете в новый созданный html документ. Вот структура кода:

<!DOCTYPE html>
<html>
<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}

</script>

</body>

</html>

Для этого вам нужно создать простой текстовый документ ajax_info.txt и поместить туда любой произвольный текст. Пускай это будет несколько строчек. При нажатии на кнопку будет происходить событие, а именно смена текста. Сначала пользователь видит один текст, нажимает на кнопку и ему показывается уже другой без перезагрузки страницы. Теперь я думаю вы разобрались с таким вопросом, а что же такое Ajax. Увидимся в следующих выпусках.