Описание тега ajax

Описание тега Вопросы с тегом

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

ajax означает асинхронный javascript и xml.

Хотя сам по себе ajax не является технологией, это термин, придуманный в 2005 году Джесси Джеймсом Гарретом и описывающий подход к совместному использованию ряда существующих технологий, включая: html / xhtml, css, javascript, dom, xml, xslt и самое главное XMLHttpRequest объект. ajax используетXMLHttpRequest(сокращенно xhr) API для управления HTTP- запросами изнутри кода.

Что делает ajax таким полезным, так это асинхронный характер обмена данными. До его появления данные отправлялись только на этапе взаимодействия с клиентом (когда веб-страница запрашивалась впервые). Это означало, что все данные должны быть либо загружены при запросе страницы, либо взаимодействие пользователя будет представлять собой серию HTML-запросов к серверу с обновлением страницы. Каждый запрос HTML будет предоставлять дополнительную информацию как часть URL-адреса или как данные в поле формы, причем данные состояния часто хранятся как данные скрытого поля. Эта вторая альтернатива использовала серию GET или POST операции (например, загрузка страницы, изменение данных, публикация данных, загрузка страницы и т. д.), в результате которых отображаемая страница обновляется, обеспечивая прерывистый пользовательский интерфейс и возможные проблемы с безопасностью.

Ни загрузка всего набора данных в клиент, ни перезагрузка базовой страницы с каждым GET или POSTзапрос был дешевым с точки зрения ресурсов. ajax изменил веб-модель, используя JavaScript для асинхронной загрузки данных в клиент по мере необходимости.

В XMLHttpRequestобъект - основной способ взаимодействия с сервером и клиентом; он поддерживается всеми современными браузерами. Существует ряд фреймворков и библиотек с API более высокого уровня, которые инкапсулируютXMLHttpRequest объект, предоставляя более простой интерфейс, позволяющий скрыть сложность использования объекта напрямую.

Клиент открывает новую XMLHttpRequestи запрашивает веб-страницу, как при обычном вызове клиента. Однако этот запрос обычно нацелен на специальную страницу, которая загружает только данные для обработки с помощью JavaScript. Таким образом, данные, которыми необходимо обмениваться, могут быть ограничены только тем, что необходимо для этой конкретной функции, что позволяет сэкономить время, память и пропускную способность. Поскольку это асинхронное взаимодействие, это взаимодействие не должно блокировать какие-либо другие действия, выполняемые на веб-странице, и позволяет клиенту / браузеру действовать больше как локальная настольная программа с веб-сайтом, обмениваясь данными по мере необходимости без перезагрузки каких-либо других ресурсов..

Хотя "X" в ajax означает xml, можно отправлять и получать данные любого типа. json ( нотация объектов JavaScript) заменил xml в качестве предпочтительного формата обмена данными. Основная причина использования JSON заключается в том, что JavaScript изначально анализирует текст JSON, в то время как XML должен анализироваться гораздо более медленным и громоздким набором клиентских библиотек. Сегодня с помощью новыхresponseType объекты (ArrayBuffer, Blobи т. д.), вы даже можете запрашивать двоичные файлы через XMLHttpRequest, а также создавать более надежные и полнофункциональные веб-приложения.

Ранние версии Internet Explorer (IE 5 и 6) не поддерживают собственный xhr API, хотя они поддерживают activex API, который имеет большинство возможностей xhr (примером этого являетсяnew ActiveXObject("MSXML2.XMLHTTP.3.0")).

Важно отметить, что когда XMLHttpRequestиспользуется напрямую, код должен обрабатывать коммуникационный уровень и ждать завершения запроса-ответа. Это показано в примере кода ниже, начиная со строкиif (xmlhttp.readyState == 4 && xmlhttp.status == 200). Поскольку эта функция обратного вызова будет вызываться каждый раз, когда клиент получит пакет от сервера, этот тест необходим, чтобы убедиться, что состояние запроса завершено и допустимый200 ответ получен до обработки ответа.

AJAX, пример 1:

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();

Пример 2 AJAX:

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 под названием fetch это значительно упрощает использование ajax в браузерах. Нет поддержки Internet Explorer.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));

Описание тега ajax

AJAX, пример 1:

Пример 2 AJAX:

Пример jQuery AJAX:

Получить пример AJAX:

Список фреймворков AJAX:

Ресурсы: