Из Википедии, свободной энциклопедии
Перейти к навигации Перейти к поиску
«AJAX» перенаправляется сюда. Чтобы узнать о других значениях, см. Ajax .

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

Ajax (также AJAX / eɪ dʒ æ к s / , короткий для «Асинхронный JavaScript и XML ») [1] [2] представляет собой набор веб - разработки методов с использованием многих веб - технологий на стороне клиента для создания асинхронных веб - приложений . С помощью Ajax веб-приложения могут отправлять и получать данные с сервера.асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы. Отделив уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, как следствие, веб-приложениям динамически изменять контент без необходимости перезагружать всю страницу. [3] На практике современные реализации обычно используют JSON вместо 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 стал обозначать широкую группу веб-технологий, которые можно использовать для реализации веб-приложения, которое взаимодействует с сервером в фоновом режиме, не влияя на текущее состояние страницы. В статье, в которой был введен термин 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 , поэтому были созданы некоторые из следующих обходных путей.

Пример jQuery [ править ]

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

$ . ajax ({ type :  'GET' , url :  'send-ajax-data.php' ,успех :  функция  ( данные )  { консоль . журнал ( данные ); }, ошибка :  функция ( ошибка )  { консоль . журнал ( 'Ошибка:'  +  ошибка ); } });

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

$ . получить ( 'send-ajax-data.php' ). сделано ( функция ( данные )  { консоль . журнал ( данные ); }). сбой ( функция ( данные )  { консоль . журнал ( 'Ошибка:'  +  данные ); });

Получить пример [ править ]

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 .

См. Также [ править ]

  • ActionScript
  • Комета (программирование) (также известная как Reverse Ajax)
  • Живой поиск Google
  • HTTP / 2
  • Список фреймворков Ajax
  • Node.js
  • Удаленное создание сценариев
  • Богатое Интернет-приложение
  • WebSocket
  • HTML5
  • JavaScript

Ссылки [ править ]

  1. ^ a b c Джесси Джеймс Гарретт (18 февраля 2005 г.). «Ajax: новый подход к веб-приложениям» . AdaptivePath.com. Архивировано 10 сентября 2015 года . Проверено 19 июня 2008 года .
  2. ^ «Ajax - руководства для веб-разработчиков» . Веб-документы MDN . Архивировано 28 февраля 2018 года . Проверено 27 февраля 2018 года .
  3. ^ a b Ульман, Крис (март 2007 г.). Начиная с Ajax . wrox. ISBN 978-0-470-10675-4. Архивировано 5 июля 2008 года . Проверено 24 июня 2008 года .
  4. ^ a b «Статья по истории XMLHTTP от оригинального разработчика» . Alexhopmann.com. 31 января 2007 года Архивировано из оригинала 23 июня 2007 . Проверено 14 июля 2009 года .
  5. ^ «Спецификация интерфейса IXMLHTTPRequest из Microsoft Developer Network» . Msdn.microsoft.com. Архивировано 26 мая 2016 года . Проверено 14 июля 2009 года .
  6. ^ Датта, Sunava (23 января 2006). «Собственный объект XMLHTTPRequest» . IEBlog . Microsoft. Архивировано 6 марта 2010 года . Проверено 30 ноябрю 2 006 .
  7. ^ «Динамический HTML и XML: объект XMLHttpRequest» . Apple Inc. Архивировано 9 мая 2008 года . Проверено 25 июня 2008 года .
  8. ^ Хопманн, Алекс. «История XMLHTTP» . Блог Алекса Хопмана . Архивировано из оригинального 30 марта 2010 года . Проверено 17 мая 2010 года .
  9. ^ "Краткая история Ajax" . Аарон Шварц. 22 декабря 2005 года архивации с оригинала на 3 июня 2010 года . Проверено 4 августа 2009 года .
  10. ↑ English, Paul (12 апреля 2006 г.). «Пользовательский интерфейс каяка» . Официальный техноблог Kayak.com . Архивировано 23 мая 2014 года . Проверено 22 мая 2014 .
  11. ^ а б ван Кестерен, Энн; Джексон, Дин (5 апреля 2006 г.). «Объект XMLHttpRequest» . W3.org . Консорциум World Wide Web. Архивировано 16 мая 2008 года . Проверено 25 июня 2008 года .
  12. ^ Кестерен, Энн; Обург, Джулиан; Сонг, Чонки; Стин, Холлворд Р.М. "XMLHttpRequest Level 1" . W3.org . W3C. Архивировано 13 июля 2017 года . Проверено 19 февраля 2019 .
  13. ^ "Стандарт XMLHttpRequest" . xhr.spec.whatwg.org . Проверено 21 апреля 2020 года .
  14. ^ «Обозначение объектов JavaScript» . Apache.org. Архивировано 16 июня 2008 года . Проверено 4 июля 2008 года .
  15. ^ «Ускорьте работу приложений на основе Ajax с помощью JSON» . DevX.com. Архивировано из оригинала 4 июля 2008 года . Проверено 4 июля 2008 года .
  16. ^ Куинси, Питер. «Защита пользователей Ajax» . Архивировано 19 февраля 2010 года . Проверено 8 января 2009 года .
  17. ^ "Обзор WAI-ARIA" . W3C. Архивировано 26 октября 2010 года . Проверено 21 октября 2010 года .
  18. ↑ Эдвардс, Джеймс (5 мая 2006 г.). «Ajax и программы чтения с экрана: когда это может сработать?» . sitepoint.com . Архивировано 6 марта 2011 года . Проверено 27 июня 2008 года .
  19. ^ «Контроль доступа для межсайтовых запросов» . Консорциум World Wide Web. Архивировано 14 мая 2008 года . Проверено 27 июня 2008 года .
  20. ^ «Безопасная междоменная связь в браузере» . Журнал архитектуры (MSDN). Архивировано 29 марта 2010 года . Проверено 27 апреля 2010 года .
  21. ^ Пиментел, Виктория; Никерсон, Брэдфорд Г. (8 мая 2012 г.). «Обмен данными и отображение данных в реальном времени с помощью WebSocket». IEEE Internet Computing . 16 (4): 45–53. DOI : 10.1109 / MIC.2012.64 .
  22. ^ a b "Зачем использовать Ajax?" . ИнтерАКТ. 10 ноября 2005 года архивации с оригинала на 29 мая 2008 года . Проверен +26 июня 2008 .
  23. ^ a b «Глубокое связывание для AJAX» . Архивировано 23 июля 2011 года . Проверено 21 апреля 2010 года .
  24. ^ a b «Спецификация HTML5» . Архивировано 19 октября 2011 года . Проверено 21 октября 2011 года .
  25. ^ Хендрикс, Эрик (23 мая 2014). «Официальные новости сканирования и индексации сайтов для индекса Google» . Google . Архивировано 25 мая 2015 года . Дата обращения 24 мая 2015 .
  26. ^ Prokoph, Andreas (8 мая 2007). «Помогите поисковым роботам эффективно сканировать ваши сайты портала и веб-сайты» . IBM . Архивировано 19 февраля 2010 года . Проверено 22 апреля 2009 года .
  27. ^ «Прекращение поддержки нашей схемы сканирования AJAX» . Центральный блог Google для веб-мастеров. 14 октября 2015. архивации с оригинала на 17 октября 2015 года . Проверено 15 октября 2015 года .
  28. ^ «Fetch API - веб-API» . MDN . Архивировано 29 мая 2019 года . Проверено 30 мая 2019 .

Внешние ссылки [ править ]

  • Ajax: новый подход к веб-приложениям  - статья, в которой был введен термин Ajax, и вопросы и ответы
  • Ajax (программирование) в Curlie
  • Учебник Ajax с примерами GET, POST, текста и XML.