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
в следующих важных аспектах:
- Возвращенное обещание
fetch()
не будет отклонено при статусе ошибки HTTP, даже если ответом является HTTP 404 или 500. Вместо этого, как только сервер ответит заголовками, обещание разрешится нормально (со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 Июню 2 008 .
- ^ а б «Глубокое связывание для 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.