Ajax (стр. программирование)

редактировать
Группа взаимосвязанных методов веб-разработки

Асинхронный JavaScript и XML
Впервые появилосьМарт 1999 г.
Имя файла расширения .js
Форматы файлов JavaScript
Под влиянием
JavaScript и XML

Ajax (также AJAX ; сокращение от «Асинхронный JavaScript и XML ») - это набор методов веб-разработки, использующих многие веб-технологии на стороне клиента для создания асинхронные веб-приложения. С помощью Ajax веб-приложения могут отправлять и получать данные с сервера асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы. Отделив уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, в более широком смысле, веб-приложениям динамически изменять контент без необходимости перезагружать всю страницу. На практике современные реализации обычно используют JSON вместо XML.

Ajax - это не отдельная технология, а скорее группа технологий. HTML и CSS могут использоваться в комбинации для разметки и стилизации информации. Затем веб-страницу можно изменить с помощью JavaScript, чтобы она динамически отображала новую информацию и позволяла пользователю взаимодействовать с ней. Встроенный объект XMLHttpRequest или с 2017 года новая функция «fetch ()» в JavaScript обычно используется для выполнения Ajax на веб-страницах, позволяя веб-сайтам загружать контент на экран без обновления страницы. Ajax - это не новая технология или другой язык, это просто существующие технологии, используемые по-новому.

Содержание
  • 1 История
  • 2 Технологии
  • 3 Недостатки
  • 4 Примеры
    • 4.1 Пример JavaScript
    • 4.2 Пример jQuery
    • 4.3 Пример выборки
  • 5 См. Также
  • 6 Ссылки
  • 7 Внешние ссылки
История

В начале-середине 1990-х годов большинство Web сайтов были основаны на полных HTML-страницах. Каждое действие пользователя требовало загрузки с сервера полностью новой страницы. Этот процесс был неэффективным, что отражалось в опыте пользователя: все содержимое страницы исчезло, затем появилась новая страница. Каждый раз, когда браузер перезагружал страницу из-за частичного изменения, все содержимое приходилось повторно отправлять, даже если изменилась только часть информации. Это создало дополнительную нагрузку на сервер и сделало пропускную способность ограничивающим фактором производительности.

В 1996 году тег iframe был введен в Internet Explorer ; подобно элементу объекта, он может загружать или извлекать контент асинхронно. В 1998 году команда Microsoft Outlook Web Access разработала концепцию объекта сценария XMLHttpRequest. Он появился как XMLHTTP во второй версии библиотеки MSXML, которая поставлялась с Internet Explorer 5.0 в марте 1999 года.

Функциональность Windows XMLHTTP Элемент управления ActiveX в IE 5 был позже реализован в Mozilla, Safari, Opera и других браузерах как объект XMLHttpRequest JavaScript. Microsoft приняла собственную модель XMLHttpRequest начиная с версии Internet Explorer 7. Версия ActiveX по-прежнему поддерживается в Internet Explorer, но не в Microsoft Edge. Полезность этих фоновых запросов HTTP и асинхронных веб-технологий оставалась довольно непонятной, пока не стала появляться в крупномасштабных онлайн-приложениях, таких как Outlook Web Access (2000) и Oddpost (2002).

Google широко развернул совместимый со стандартами кросс-браузер Ajax с Gmail (2004) и Google Maps (2005). В октябре 2004 года публичная бета-версия Kayak.com стала одним из первых крупномасштабных применений того, что их разработчики в то время называли «xml http», в электронной коммерции. Это повысило интерес к AJAX среди разработчиков веб-программ.

Термин AJAX был публично использован 18 февраля 2005 г. Джесси Джеймсом Гарретом в статье под названием Ajax: новый подход к веб-приложениям, основанный на методах, используемых на страницах Google.

5 апреля 2006 г. Консорциум Всемирной паутины (W3C) выпустил первый проект спецификации для объекта XMLHttpRequest в попытке создать официальный веб-стандарт. Последний черновик объекта XMLHttpRequest был опубликован 6 октября 2016 года, и спецификация XMLHttpRequest теперь является жизненным стандартом.

Технологии
Традиционная модель для веб-приложения по сравнению с приложением, использующим Ajax

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

С тех пор, однако, появилось несколько разработки в технологиях, используемых в приложении Ajax, и в определении самого термина Ajax. XML больше не требуется для обмена данными, и, следовательно, XSLT больше не требуется для манипулирования данными. Нотация объектов JavaScript (JSON) часто используется в качестве альтернативного формата для обмена данными, хотя также могут использоваться другие форматы, такие как предварительно отформатированный HTML или простой текст. Множество популярных библиотек JavaScript, включая JQuery, включают абстракции, помогающие выполнять запросы Ajax.

Недостатки
  • Любой пользователь, чей браузер не поддерживает JavaScript или XMLHttpRequest или отключил эту функцию, не сможет правильно использовать страницы, зависящие от Ajax. Простые устройства (например, смартфоны и КПК ) могут не поддерживать требуемые технологии. Единственный способ позволить пользователю выполнять функциональные возможности - это вернуться к методам, отличным от JavaScript. Этого можно достичь, убедившись, что ссылки и формы могут быть разрешены должным образом, а не полагаться исключительно на Ajax.
  • Аналогичным образом, некоторые веб-приложения, использующие Ajax, построены таким образом, что их невозможно прочитать с помощью технологий чтения с экрана, например JAWS. Стандарты WAI-ARIA предоставляют способ предоставления подсказок в таком случае.
  • Программы чтения с экрана, которые могут использовать Ajax, могут по-прежнему не иметь возможности правильно читать динамически сгенерированный контент.
  • Политика одинакового происхождения предотвращает использование некоторых методов Ajax в доменах, хотя W3C имеет черновик объекта XMLHttpRequest, который включит эту функцию. Существуют методы, позволяющие обойти эту функцию безопасности с помощью специального канала междоменной связи, встроенного в виде iframe на странице, или с помощью JSONP.
  • Ajax разработан для односторонней связи с сервером. Если требуется двусторонняя связь (например, для того, чтобы клиент отслеживал события / изменения на сервере), то WebSockets может быть лучшим вариантом.
  • В до- HTML5, страницы, динамически создаваемые с использованием последовательных запросов Ajax, не регистрируются автоматически в механизме истории браузера, поэтому нажатие кнопки «Назад» в браузере, возможно, не вернуло браузер в более раннее состояние страницы с поддержкой Ajax, но может иметь вместо этого вернулся к последней полной странице, которую посещали перед ней. Такое поведение - переход между страницами вместо перехода между состояниями страниц - может быть желательным, но если требуется детальное отслеживание состояния страницы, то обходной путь до HTML5 заключался в использовании невидимых фреймов для запуска изменений в история браузера. Обходной путь, реализованный методами Ajax, заключается в изменении идентификатора фрагмента URL (часть URL-адреса после символа #) при доступе к странице с поддержкой Ajax и отслеживании изменений. HTML5 предоставляет расширенный стандарт API для работы с механизмом истории браузера.
  • Обновления динамической веб-страницы также затрудняют закладку и возврат к определенному состоянию приложение. Существуют решения этой проблемы, многие из которых снова используют идентификатор фрагмента URL. С другой стороны, поскольку страницы с интенсивным использованием AJAX имеют тенденцию функционировать как приложения, а не как контент, создание закладок для промежуточных состояний редко имеет смысл. Тем не менее, решение, предоставленное HTML5 для вышеупомянутой проблемы, также применимо для этого.
  • В зависимости от характера приложения Ajax динамические обновления страницы могут нарушать взаимодействие пользователя, особенно если интернет-соединение медленное или ненадежное. Например, редактирование поля поиска может инициировать запрос к серверу для завершения поиска, но пользователь может не знать, что скоро появится всплывающее окно завершения поиска, и, если подключение к Интернету медленное, всплывающий список может появиться в неудобное время., когда пользователь уже сделал что-то еще.
  • За исключением Google, большинство основных веб-сканеров не выполняют код JavaScript, поэтому для индексации Системы веб-поиска, веб-приложение должно предоставлять альтернативные средства доступа к контенту, который обычно можно получить с помощью Ajax. Было высказано предположение, что безголовый браузер может использоваться для индексации контента, предоставляемого веб-сайтами с поддержкой Ajax, хотя Google больше не рекомендует предложение сканирования Ajax, которое они сделали в 2009 году.
Примеры

Пример JavaScript

Пример простого запроса Ajax с использованием метода GET, написанного на JavaScript.

get-ajax-data.js:

// Это клиентский сценарий. // Инициализируем HTTP-запрос. var xhr = новый XMLHttpRequest (); xhr.open ('ПОЛУЧИТЬ', 'send-ajax-data.php'); // Отслеживаем изменения состояния запроса. xhr.onreadystatechange = функция () {var DONE = 4; // readyState 4 означает, что запрос выполнен. var OK = 200; // статус 200 - успешный возврат. если (xhr.readyState === DONE) {если (xhr.status === ОК) {console.log (xhr.responseText); // 'Это результат.' } else {console.log ('Ошибка:' + xhr.status); // Ошибка при запросе. }}}; // Отправляем запрос на send-ajax-data.php xhr.send (null);

send-ajax-data.php:

Многим разработчикам не нравится синтаксис, используемый в объекте XMLHttpRequest, поэтому были созданы некоторые из следующих обходных путей.

Пример jQuery

В популярной библиотеке JavaScript jQuery реализованы абстракции, которые позволяют разработчикам более удобно использовать Ajax. Хотя он по-прежнему использует XMLHttpRequest за кулисами, ниже приведена клиентская реализация того же примера, что и выше, с использованием метода ajax.

$.ajax ({type: 'GET', url: 'send-ajax-data.php', dataType: "JSON", // тип данных, ожидаемый при успешном завершении сервера: function (data) {console.log ( данные);}, ошибка: функция (ошибка) {console.log ('Ошибка:' + ошибка);}});

jQuery также реализует метод get, который позволяет писать тот же код более кратко.

$.get ('send-ajax-data.php'). Done (function (data) {console.log (данные);}). сбой (функция (данные) {console.log ('Ошибка:' + данные);});

Пример Fetch

Fetch - это новый собственный JavaScript API. Согласно документации разработчиков Google, «Fetch упрощает выполнение веб-запросов и обработку ответов, чем при использовании более старого XMLHttpRequest».

fetch ('send-ajax-data.php').then (data =>console.log (data)).catch (error =>console.log ('Error:' + error));

Пример async / await ES7:

async function doAjax () {try {const res = await fetch ('send-ajax-data.php'); const data = ждать res.text (); console.log (данные); } catch (ошибка) {console.log ('Ошибка:' + ошибка); }} doAjax ();

Как видно выше, выборка основана на обещаниях JavaScript .

См. Также
Ссылки
Внешние ссылки
Викискладе есть материалы, связанные с AJAX (программирование).
В Викиучебниках есть книга по теме: AJAX
Последняя правка сделана 2021-06-09 22:16:14
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
Обратная связь: support@alphapedia.ru
Соглашение
О проекте