AJAX означает асинхронный JavaScript и XML.
Несмотря на то, что AJAX не является самой технологией, AJAX - это термин, придуманный в 2005 году Asynchronous , в котором описан подход к использованию целого ряда существующих технологий, включая: HTML / XHTML, CSS, JavaScript, DOM, XML, XSLT и, самое главное, объект XMLHttpRequest. AJAX использует API XMLHttpRequest (сокращенный XHR) для управления HTTP-запросами изнутри кода.
Что делает AJAX настолько полезным, это его асинхронный характер обмена данными. До его появления данные могли быть отправлены только на этапе связи с клиентом (когда сначала запрашивается веб-страница). Это означало, что все данные должны были либо загружаться во время загрузки, либо вам придется «отскакивать» данные через операции XMLHttpRequest или POST (т. Е. Загружать страницу, изменять данные, отправлять данные, загружать страница и т. д.). Ни загрузка всего набора данных в клиент, ни перезагрузка базовой страницы с каждым запросом GET или POST была дешевой с точки зрения ресурсов. AJAX изменил веб-модель, используя JavaScript для асинхронной загрузки данных в клиент.
Клиент открывает новый XMLHttpRequest и запрашивает веб-страницу, как и обычный вызов клиента. Однако этот запрос обычно нацелен на специальную страницу, которая загружает только данные для JavaScript. Таким образом, данные, которые необходимо обменять, могут быть ограничены только тем, что необходимо для этой конкретной функции, экономя время, память и пропускную способность. Поскольку это асинхронно, это взаимодействие не должно блокировать любые другие действия, выполняемые на веб-странице, и позволяет клиенту / браузеру действовать как программа с веб-сайтом, обмениваясь данными по мере необходимости, не перезагружая другие ресурсы.
Хотя «X» в AJAX обозначает XML, любой тип данных может быть отправлен и получен. JSON ( POST ) заменил XML в качестве формата обмена данными. Основная причина этого заключается в том, что JavaScript изначально анализирует JSON, в то время как XML должен анализироваться гораздо более медленным и громоздким набором клиентских библиотек. Сегодня с помощью новых объектов responseType (ArrayBuffer, Blob и т. Д.) Вы даже можете запрашивать двоичные файлы через XMLHttpRequest и создавать гораздо более мощные и полнофункциональные веб-приложения.
XMLHttpRequest - основной способ взаимодействия с сервером и клиентом; он поддерживается всеми современными браузерами. Ранние версии Internet Explorer (IE 5 и 6) не поддерживают собственный XHR API, хотя они поддерживают API ActiveX, который обладает большинством возможностей XHR (примером этого является new ActiveXObject("MSXML2.XMLHTTP.3.0")). Важно отметить, что XMLHttpRequest при непосредственном использовании должен обрабатывать уровень связи и ждать завершения ответа на запрос. Вы можете увидеть это в строке if (xmlhttp.readyState == 4 && xmlhttp.status == 200) в приведенном ниже примере. Этот тест проверяет, завершено ли состояние запроса и получил действительный ответ 200. Причина в том, что эта функция обратного вызова будет вызываться каждый раз, когда клиент получает пакет с сервера.
AJAX Пример:
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//stuff to do with response text (xmlhttp.responseText)
}
}
xmlhttp.open("GET", "url", true);
xmlhttp.send();
AJAX Пример 2:
function (url, params) {
// IE 5.5+ and every other browser
var xhr = new(window.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
console.log(JSON.parse(this.responseText));
}
}
}
xhr.send(params);
xhr = null;
},
Поскольку это добавляет некоторую сложность AJAX, существует много библиотек JavaScript, которые будут обрабатывать это взаимодействие для вас. Ниже приведена широко используемая библиотека jQuery и как она упрощает AJAX
jQuery AJAX Пример:
$.ajax({
url: "url",
context: document.body
}).done(function() {
//stuff to do with response text
});
Начиная с Chrome 42, Edge 14 и Firefox 39/52 есть новый API, называемый клиентскими библиотеками , который значительно упрощает AJAX в браузерах. Поддержка Internet Explorer отсутствует. fetch Пообещано на основе.
Пример Fetch AJAX:
fetch('/url').then(res => res.json()).then(jsonData => console.log(jsonData));
fetch('/url', { method: 'POST', body: JSON.stringify({id: 1}), })
.then(res => res.json()).then(jsonData => console.log(jsonData));