stringtranslate.com

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

Ajax (также AJAX / ˈ eɪ dʒ æ k s / ; сокращение от « асинхронный JavaScript и XML » [1] [2] ) — это набор методов веб-разработки , который использует различные веб-технологии на стороне клиента для создания асинхронных веб-приложений . С помощью Ajax веб-приложения могут отправлять и извлекать данные с сервера асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы. Разделяя уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, как следствие, веб-приложениям динамически изменять содержимое без необходимости перезагрузки всей страницы. [3] На практике современные реализации обычно используют JSON вместо XML.

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

История

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

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

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

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

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

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

Технологии

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

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

Однако с тех пор произошел ряд изменений в технологиях, используемых в приложении Ajax, и в определении самого термина Ajax. XML больше не требуется для обмена данными, и, следовательно, XSLT больше не требуется для манипулирования данными. JavaScript Object Notation (JSON) часто используется в качестве альтернативного формата для обмена данными, [15] хотя могут использоваться и другие форматы, такие как предварительно отформатированный HTML или простой текст. [16] Различные популярные библиотеки JavaScript, включая JQuery , включают абстракции для помощи в выполнении запросов Ajax.

Примеры

Пример JavaScript

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

получить-ajax-data.js:

// Это клиентский скрипт.// Инициализируем HTTP-запрос. let xhr = new XMLHttpRequest (); // определяем запрос xhr.open ( 'GET' , 'send-ajax-data.php' );     // Отслеживаем изменения состояния запроса. xhr.onreadystatechange = function ( ) { const DONE = 4 ; // readyState 4 означает , что запрос выполнен. const OK = 200 ; // статус 200 — успешный возврат. if ( xhr.readyState === DONE ) { if ( xhr.status === OK ) { console.log ( xhr.responseText ) ; // ' Это вывод.' } else { console.log ( ' Ошибка : ' + xhr.status ); // Во время запроса произошла ошибка . } } } ;                          // Отправляем запрос на send-ajax-data.php xhr . send ( null );

отправить-ajax-data.php:

<?php // Это скрипт на стороне сервера.// Устанавливаем тип содержимого. header ( 'Content-Type: text/plain' );// Отправляем данные обратно. echo  "Это вывод." ; ?>

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

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

fetch ( 'send-ajax-data.php' ) . then ( data => console.log ( data ) ) ) . catch ( error => console.log ( ' Ошибка : ' + error ));

Пример ES7 async/await

асинхронная функция doAjax1 () { try { const res = await fetch ( 'send-ajax-data.php ' ); const data = await res . text (); console . log ( data ); } catch ( error ) { console . log ( 'Error:' + error ); } }                        doAjax1 ();

Fetch использует обещания JavaScript.

Спецификация fetchотличается от Ajaxследующей существенной особенностью:

Преимущества

Ajax предлагает несколько преимуществ, которые могут значительно повысить производительность веб-приложений и удобство для пользователей. Уменьшая трафик сервера и повышая скорость, Ajax играет важную роль в современной веб-разработке. Одним из ключевых преимуществ Ajax является его способность отображать веб-приложения без необходимости извлечения данных, что приводит к снижению трафика сервера. Эта оптимизация минимизирует время отклика как на стороне сервера, так и на стороне клиента, устраняя необходимость для пользователей терпеть загрузочные экраны. [18]

Кроме того, Ajax облегчает асинхронную обработку, упрощая использование XmlHttpRequest, что позволяет эффективно обрабатывать запросы на асинхронное извлечение данных. Кроме того, динамическая загрузка контента значительно повышает производительность приложения. [19]

Кроме того, Ajax имеет широкую поддержку во всех основных веб-браузерах, включая Microsoft Internet Explorer версии 5 и выше, Mozilla Firefox версии 1.0 и выше, Opera версии 7.6 и выше, а также Apple Safari версии 1.2 и выше. [20]

Смотрите также

Ссылки

  1. ^ abc Джесси Джеймс Гарретт (18 февраля 2005 г.). "Ajax: новый подход к веб-приложениям". AdaptivePath.com. Архивировано из оригинала 10 сентября 2015 г. Получено 19 июня 2008 г.
  2. ^ "Ajax - Web developer guides". MDN Web Docs . Архивировано из оригинала 28 февраля 2018 г. Получено 27 февраля 2018 г.
  3. ^ ab Ullman, Крис (март 2007). Начало Ajax. wrox. ISBN 978-0-470-10675-4. Архивировано из оригинала 5 июля 2008 г. . Получено 24 июня 2008 г. .
  4. ^ ab "Статья об истории XMLHTTP от оригинального разработчика". Alexhopmann.com. 31 января 2007 г. Архивировано из оригинала 23 июня 2007 г. Получено 14 июля 2009 г.
  5. ^ "Спецификация интерфейса IXMLHTTPRequest из Microsoft Developer Network". Msdn.microsoft.com. Архивировано из оригинала 26 мая 2016 г. Получено 14 июля 2009 г.
  6. ^ Dutta, Sunava (23 января 2006 г.). "Native XMLHTTPRequest object". IEBlog . Microsoft. Архивировано из оригинала 6 марта 2010 г. Получено 30 ноября 2006 г.
  7. ^ "Динамический HTML и XML: объект XMLHttpRequest". Apple Inc. Архивировано из оригинала 9 мая 2008 г. Получено 25 июня 2008 г.
  8. ^ Хопманн, Алекс. "История XMLHTTP". Блог Алекса Хопманна . Архивировано из оригинала 30 марта 2010 г. Получено 17 мая 2010 г.
  9. ^ Тайнан, Дэн (1 октября 2007 г.). «16 величайших моментов в истории Интернета». Предприниматель .
  10. ^ "Краткая история Аякса". Аарон Шварц. 22 декабря 2005 г. Архивировано из оригинала 3 июня 2010 г. Получено 4 августа 2009 г.
  11. ^ English, Paul (12 апреля 2006 г.). "Kayak User Interface". Официальный технологический блог Kayak.com . Архивировано из оригинала 23 мая 2014 г. Получено 22 мая 2014 г.
  12. ^ ван Кестерен, Энн; Джексон, Дин (5 апреля 2006 г.). "Объект XMLHttpRequest". W3.org . Консорциум Всемирной паутины. Архивировано из оригинала 16 мая 2008 г. Получено 25 июня 2008 г.
  13. ^ Кестерен, Энн; Обур, Джулиан; Сонг, Джунгки; Стин, Холлворд RM "XMLHttpRequest Level 1". W3.org . W3C. Архивировано из оригинала 13 июля 2017 г. Получено 19 февраля 2019 г.
  14. ^ "XMLHttpRequest Standard". xhr.spec.whatwg.org . Получено 21 апреля 2020 г. .
  15. ^ "JavaScript Object Notation". Apache.org. Архивировано из оригинала 16 июня 2008 г. Получено 4 июля 2008 г.
  16. ^ "Ускорьте свои приложения на базе Ajax с помощью JSON". DevX.com. Архивировано из оригинала 4 июля 2008 г. Получено 4 июля 2008 г.
  17. ^ "Fetch API - Web APIs". MDN . Архивировано из оригинала 29 мая 2019 г. Получено 30 мая 2019 г.
  18. ^ "Что такое AJAX? Преимущества и недостатки Ajax?". magaplaza. Архивировано из оригинала 6 октября 2023 г. Получено 6 октября 2023 г.
  19. ^ "Что такое AJAX? Преимущества и недостатки AjaxПреимущества и недостатки AJAX – вы знаете о них". POTENZA. Архивировано из оригинала 6 октября 2023 г. Получено 6 октября 2023 г.
  20. ^ "Top 5+ Advantages and Disadvantages of AJAX". POTENZA. Архивировано из оригинала 6 октября 2023 г. Получено 6 октября 2023 г.

Внешние ссылки

На Викискладе есть медиафайлы по теме AJAX (программирование) .
В Wikibooks есть книга по теме: AJAX