Ajax (также AJAX / eɪ dʒ æ к s / , короткий для «Асинхронный JavaScript и XML ») [1] [2] представляет собой набор веб - разработки методов с использованием многих веб - технологий на стороне клиента для создания асинхронных веб - приложений . С помощью Ajax веб-приложения могут отправлять и получать данные с сервера.асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы. Отделив уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, как следствие, веб-приложениям динамически изменять контент без необходимости перезагружать всю страницу. [3] На практике современные реализации обычно используют JSON вместо XML.
Впервые появился | Март 1999 г. |
---|---|
Расширения имени файла | .js |
Форматы файлов | JavaScript |
Под влиянием | |
JavaScript и XML |
Ajax - это не отдельная технология, а группа технологий. HTML и CSS можно использовать в сочетании для разметки и стилизации информации. Затем веб-страницу можно изменить с помощью JavaScript, чтобы она динамически отображала новую информацию и позволяла пользователю взаимодействовать с ней. Встроенный объект XMLHttpRequest или с 2017 года новая функция выборки в JavaScript обычно используется для выполнения Ajax на веб-страницах, позволяя веб-сайтам загружать контент на экран без обновления страницы. Ajax - это не новая технология или другой язык, это просто существующие технологии, используемые по-новому.
История
В начале-середине 1990-х годов большинство веб- сайтов основывалось на полных HTML-страницах. Каждое действие пользователя требовало загрузки с сервера полностью новой страницы. Этот процесс был неэффективным, что отражалось в опыте пользователя: все содержимое страницы исчезло, затем появилась новая страница. Каждый раз, когда браузер перезагружал страницу из-за частичного изменения, все содержимое приходилось повторно отправлять, даже если изменилась только часть информации. Это создало дополнительную нагрузку на сервер и сделало пропускную способность ограничивающим фактором производительности.
В 1996 году Internet Explorer представил тег iframe ; как и элемент объекта , он может загружать или извлекать контент асинхронно. В 1998 году группа Microsoft Outlook Web Access разработала концепцию объекта сценария XMLHttpRequest . [4] Он появился как XMLHTTP во второй версии библиотеки MSXML , [4] [5], которая поставлялась с Internet Explorer 5.0 в марте 1999 года. [6]
Функциональные возможности элемента управления Windows XMLHTTP ActiveX в IE 5 были позже реализованы в Mozilla , Safari , Opera и других браузерах как объект JavaScript XMLHttpRequest . [7] Microsoft приняла собственную модель XMLHttpRequest начиная с Internet Explorer 7 . Версия ActiveX по-прежнему поддерживается в Internet Explorer, но не в Microsoft Edge . Полезность этих фоновых HTTP- запросов и асинхронных веб-технологий оставалась довольно неясной, пока не начала появляться в крупномасштабных онлайн-приложениях, таких как Outlook Web Access (2000) [8] и Oddpost (2002).
Google широко развернул совместимый со стандартами кроссбраузерный Ajax с Gmail (2004 г.) и Google Maps (2005 г.). [9] В октябре 2004 года публичная бета-версия Kayak.com стала одним из первых крупномасштабных приложений электронной коммерции, которые их разработчики в то время называли «xml http». [10] Это повысило интерес к AJAX среди разработчиков веб-программ.
Термин AJAX был публично использован 18 февраля 2005 года Джесси Джеймсом Гарретом в статье под названием « Ajax: новый подход к веб-приложениям» , основанной на методах, используемых на страницах Google. [1]
5 апреля 2006 г. Консорциум World Wide Web (W3C) выпустил первый проект спецификации для объекта XMLHttpRequest в попытке создать официальный веб-стандарт . [11] Последний черновик объекта XMLHttpRequest был опубликован 6 октября 2016 г. [12], и теперь спецификация XMLHttpRequest стала нормой жизни . [13]
Технологии
Термин Ajax стал обозначать широкую группу веб-технологий, которые можно использовать для реализации веб-приложения, которое взаимодействует с сервером в фоновом режиме, не влияя на текущее состояние страницы. В статье, в которой был введен термин Ajax, [1] [3] Джесси Джеймс Гарретт объяснил, что используются следующие технологии:
- HTML (или XHTML ) и CSS для презентации
- Объектная модель документа (DOM) для динамического отображения и взаимодействия с данными
- JSON или XML для обмена данными и XSLT для обработки XML
- Объект XMLHttpRequest для асинхронной связи
- JavaScript для объединения этих технологий
Однако с тех пор произошел ряд изменений в технологиях, используемых в приложении Ajax, и в определении самого термина Ajax. XML больше не требуется для обмена данными и, следовательно, XSLT больше не требуется для манипулирования данными. Нотация объектов JavaScript (JSON) часто используется в качестве альтернативного формата для обмена данными [14], хотя также могут использоваться другие форматы, такие как предварительно отформатированный HTML или простой текст. [15] Множество популярных библиотек JavaScript, включая JQuery, включают абстракции, помогающие выполнять запросы Ajax.
Недостатки
- Любой пользователь, чей браузер не поддерживает JavaScript или XMLHttpRequest или у которого эта функция отключена, не сможет правильно использовать страницы, зависящие от Ajax. Единственный способ позволить пользователю выполнять функциональные возможности - это вернуться к методам, отличным от JavaScript. Этого можно добиться, убедившись, что ссылки и формы можно разрешить правильно, а не полагаться только на Ajax. [16]
- Точно так же некоторые веб-приложения, использующие Ajax, построены таким образом, что их невозможно прочитать с помощью технологий чтения с экрана, таких как JAWS . Стандарты WAI-ARIA предоставляют способ дать подсказки в таком случае. [17]
- Программы чтения с экрана, которые могут использовать Ajax, по-прежнему не могут правильно читать динамически сгенерированный контент. [18]
- Политика одного и того же происхождения предотвращает использование некоторых методов Ajax в разных доменах [11], хотя W3C имеет черновик объекта XMLHttpRequest, который включит эту функцию. [19] Существуют методы, позволяющие обойти эту функцию безопасности с помощью специального канала междоменной связи, встроенного в виде iframe на странице, [20] или с помощью JSONP .
- Ajax предназначен для односторонней связи с сервером. Если требуется двусторонняя связь (например, чтобы клиент слушал события / изменения на сервере), тогда WebSockets может быть лучшим вариантом. [21]
- В браузерах до HTML5 страницы, динамически создаваемые с использованием последовательных запросов Ajax, не регистрировались автоматически в механизме истории браузера, поэтому нажатие кнопки браузера «Назад» могло не вернуть браузер в более раннее состояние страницы с поддержкой Ajax, но возможно, вместо этого вернулся к последней полной странице, которую посещали перед этим. Такое поведение - переход между страницами вместо перехода между состояниями страниц - может быть желательным, но если требуется детальное отслеживание состояния страницы, то обходным путем до HTML5 было использование невидимых фреймов для запуска изменений в истории браузера. Обходной путь, реализованный методами Ajax, заключается в изменении идентификатора фрагмента URL (часть URL после символа "#") при доступе к странице с поддержкой Ajax и отслеживании изменений. [22] [23] HTML5 предоставляет обширный стандарт API для работы с механизмом истории браузера. [24]
- Обновления динамических веб-страниц также затрудняют создание закладок и возврат к определенному состоянию приложения. Существуют решения этой проблемы, многие из которых снова используют идентификатор фрагмента URL. [22] [23] С другой стороны, поскольку страницы с интенсивным использованием AJAX имеют тенденцию функционировать как приложения, а не как контент, создание закладок для промежуточных состояний редко имеет смысл. Тем не менее, решение, предоставленное HTML5 для вышеупомянутой проблемы, также применимо для этого. [24]
- В зависимости от характера приложения Ajax динамические обновления страниц могут нарушать взаимодействие пользователя, особенно если подключение к Интернету медленное или ненадежное. Например, редактирование поля поиска может инициировать запрос к серверу для завершения поиска, но пользователь может не знать, что скоро появится всплывающее окно завершения поиска, и если подключение к Интернету медленное, всплывающий список может появиться в неудобное время. , когда пользователь уже сделал что-то еще.
- Без учета Google , [25] наиболее крупные веб - сканеры не выполняют код JavaScript, [26] так, чтобы быть проиндексированы веб - поисковых систем , веб - приложение должно предоставить альтернативное средство доступа к содержимому , которые обычно найденную с помощью Ajax. Было высказано предположение, что для индексации контента, предоставляемого веб-сайтами с поддержкой Ajax, можно использовать автономный браузер , хотя Google больше не рекомендует предложение сканирования Ajax, которое они сделали в 2009 году [27].
Примеры
Пример 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 - успешный возврат. if ( xhr . readyState === DONE ) { if ( xhr . status === OK ) { console . журнал ( xhr . responseText ); // 'Это результат.' } else { console . log ( 'Ошибка:' + xhr . status ); // Ошибка при запросе. } } };// Отправляем запрос на send-ajax-data.php xhr . отправить ( ноль );
отправить-ajax-data.php:
php // Это серверный скрипт.// Устанавливаем тип содержимого. заголовок ( 'Content-Type: text / plain' );// Отправляем данные обратно. echo "Это результат." ; ?>
Многим разработчикам не понравился синтаксис, используемый в объекте XMLHttpRequest , поэтому некоторые из них применили обходные пути, которые больше не нужны после Fetch.
Получить пример
Fetch - это новый собственный JavaScript API. [28] Согласно документации разработчиков Google , «Fetch упрощает выполнение веб-запросов и обработку ответов, чем с помощью более старого XMLHttpRequest».
fetch ( 'send-ajax-data.php' ) . затем ( данные => консоль . журнал ( данные )) . catch ( error => console . log ( 'Ошибка:' + ошибка ));
Пример ES7 async / await:
асинхронная функция doAjax () { попробуйте { const res = await fetch ( 'send-ajax-data.php' ); const data = ждать res . текст (); консоль . журнал ( данные ); } catch ( ошибка ) { console . журнал ( 'Ошибка:' + ошибка ); } }doAjax ();
Как видно выше, fetch полагается на обещания JavaScript .
В fetch
спецификации отличается от Ajax
в следующих важных аспектах:
- Promise, возвращенный из
fetch()
, не будет отклонен при статусе ошибки HTTP, даже если ответом является HTTP 404 или 500. Вместо этого, как только сервер ответит заголовками, Promise разрешится нормально (соok
свойством ответа, установленным в false, если ответ не находится в диапазоне 200–299), и он будет отклонен только в случае сбоя сети или если что-то помешает завершению запроса. fetch()
не будет отправлять файлы cookie из разных источников, если вы не установите параметр инициализации учетных данных . (С апреля 2018 года. Спецификация изменила политику учетных данных по умолчанию наsame-origin
. Firefox изменился с версии 61.0b13.)
Смотрите также
- ActionScript
- Комета (программирование) (также известная как Reverse Ajax)
- Живой поиск Google
- HTTP / 2
- Список фреймворков Ajax
- Node.js
- Удаленное создание сценариев
- Богатое Интернет-приложение
- WebSocket
- HTML5
- JavaScript
Рекомендации
- ^ a b c Джесси Джеймс Гарретт (18 февраля 2005 г.). «Ajax: новый подход к веб-приложениям» . AdaptivePath.com. Архивировано 10 сентября 2015 года . Проверено 19 июня 2008 года .
- ^ «Ajax - руководства для веб-разработчиков» . Веб-документы MDN . Архивировано 28 февраля 2018 года . Проверено 27 февраля 2018 года .
- ^ а б Ульман, Крис (март 2007 г.). Начиная с Ajax . wrox. ISBN 978-0-470-10675-4. Архивировано 5 июля 2008 года . Проверено 24 июня 2008 года .
- ^ а б «Статья оригинального разработчика по истории XMLHTTP» . Alexhopmann.com. 31 января 2007 года Архивировано из оригинала 23 июня 2007 . Проверено 14 июля 2009 года .
- ^ «Спецификация интерфейса IXMLHTTPRequest из Microsoft Developer Network» . Msdn.microsoft.com. Архивировано 26 мая 2016 года . Проверено 14 июля 2009 года .
- ^ Дутта, Сунава (23 января 2006 г.). «Собственный объект XMLHTTPRequest» . IEBlog . Microsoft. Архивировано 6 марта 2010 года . Источник +30 Ноябрю 2 006 .
- ^ «Динамический HTML и XML: объект XMLHttpRequest» . Apple Inc. Архивировано 9 мая 2008 года . Проверено 25 июня 2008 года .
- ^ Хопманн, Алекс. «История XMLHTTP» . Блог Алекса Хопмана . Архивировано из оригинального 30 марта 2010 года . Проверено 17 мая 2010 года .
- ^ «Краткая история Аякса» . Аарон Шварц. 22 декабря 2005 года архивации с оригинала на 3 июня 2010 года . Проверено 4 августа 2009 года .
- ^ Инглиш, Пол (12 апреля 2006 г.). «Пользовательский интерфейс каяка» . Официальный техноблог Kayak.com . Архивировано 23 мая 2014 года . Проверено 22 мая 2014 .
- ^ а б ван Кестерен, Энн; Джексон, Дин (5 апреля 2006 г.). «Объект XMLHttpRequest» . W3.org . Консорциум World Wide Web. Архивировано 16 мая 2008 года . Проверено 25 июня 2008 года .
- ^ Кестерен, Энн; Обург, Джулиан; Сонг, Чонки; Стин, Холлворд Р.М. "XMLHttpRequest Level 1" . W3.org . W3C. Архивировано 13 июля 2017 года . Проверено 19 февраля 2019 .
- ^ «Стандарт XMLHttpRequest» . xhr.spec.whatwg.org . Проверено 21 апреля 2020 года .
- ^ «Обозначение объектов JavaScript» . Apache.org. Архивировано 16 июня 2008 года . Проверено 4 июля 2008 года .
- ^ «Ускорьте работу приложений на основе Ajax с помощью JSON» . DevX.com. Архивировано из оригинала 4 июля 2008 года . Проверено 4 июля 2008 года .
- ^ Куинси, Питер. «Защита пользователей Ajax» . Архивировано 19 февраля 2010 года . Проверено 8 января 2009 года .
- ^ «Обзор WAI-ARIA» . W3C. Архивировано 26 октября 2010 года . Проверено 21 октября 2010 года .
- ^ Эдвардс, Джеймс (5 мая 2006 г.). «Ajax и программы чтения с экрана: когда это может сработать?» . sitepoint.com . Архивировано 6 марта 2011 года . Проверено 27 июня 2008 года .
- ^ «Контроль доступа для межсайтовых запросов» . Консорциум World Wide Web. Архивировано 14 мая 2008 года . Проверено 27 июня 2008 года .
- ^ «Безопасная междоменная связь в браузере» . Журнал архитектуры (MSDN). Архивировано 29 марта 2010 года . Проверено 27 апреля 2010 года .
- ^ Пиментель, Виктория; Никерсон, Брэдфорд Г. (8 мая 2012 г.). «Обмен данными и отображение данных в реальном времени с помощью WebSocket». IEEE Internet Computing . 16 (4): 45–53. DOI : 10.1109 / MIC.2012.64 .
- ^ а б "Зачем использовать Ajax?" . ИнтерАКТ. 10 ноября 2005 года архивации с оригинала на 29 мая 2008 года . Источник +26 Июню 2008 .
- ^ а б «Глубокое связывание для AJAX» . Архивировано 23 июля 2011 года . Проверено 21 апреля 2010 года .
- ^ а б «Спецификация HTML5» . Архивировано 19 октября 2011 года . Проверено 21 октября 2011 года .
- ^ Хендрикс, Эрик (23 мая 2014 г.). «Официальные новости сканирования и индексации сайтов для индекса Google» . Google . Архивировано 25 мая 2015 года . Дата обращения 24 мая 2015 .
- ^ Прокоф, Андреас (8 мая 2007 г.). «Помогите поисковым роботам эффективно сканировать ваши сайты портала и веб-сайты» . IBM . Архивировано 19 февраля 2010 года . Проверено 22 апреля 2009 года .
- ^ «Прекращение поддержки нашей схемы сканирования AJAX» . Центральный блог Google для веб-мастеров. 14 октября 2015. архивации с оригинала на 17 октября 2015 года . Проверено 15 октября 2015 года .
- ^ «Fetch API - веб-API» . MDN . Архивировано 29 мая 2019 года . Проверено 30 мая 2019 .
Внешние ссылки
- Ajax: новый подход к веб-приложениям - статья, в которой был введен термин Ajax, и вопросы и ответы
- Ajax (программирование) в Curlie
- Учебник Ajax с примерами GET, POST, текста и XML.