Аякс (программирование)
| Впервые появился | март 1999 г. |
|---|---|
| Расширения имен файлов | .js |
| Форматы файлов | JavaScript |
| Под влиянием | |
| JavaScript и XML | |
Ajax (также AJAX / ˈ eɪ dʒ æ k s / ; сокращение от « Синхронный » J avaScript и x X ML » или « передача Синхронная Ja vaScript ( -fer ) [1] [2] ) — это набор методов веб-разработки , который использует различные веб-технологии на стороне клиента для создания асинхронных веб-приложений . С помощью Ajax веб-приложения могут отправлять и получать данные с сервера асинхронно (в фоновом режиме), не вмешиваясь в отображение и поведение существующей страницы. Отделяя уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, соответственно, веб-приложениям динамически изменять контент без необходимости перезагрузки всей страницы. [3] На практике современные реализации обычно используют JSON вместо XML.
Ajax — это не технология, а скорее концепция программирования. HTML и CSS можно использовать в сочетании для разметки и оформления информации. Веб-страницу можно изменить с помощью JavaScript для ее динамического отображения и предоставления пользователю возможности взаимодействовать с новой информацией. Встроенный объект XMLHttpRequest используется для выполнения Ajax на веб-страницах, позволяя веб-сайтам загружать контент на экран без обновления страницы. Ajax — это не новая технология и не новый язык. Вместо этого существующие технологии используются по-новому.
История
[ редактировать ]В начале-середине 1990-х годов большинство веб-сайтов основывались на полноценных HTML-страницах. Каждое действие пользователя требовало загрузки с сервера совершенно новой страницы. Этот процесс был неэффективным, о чем свидетельствует пользовательский опыт: весь контент страницы исчезал, а затем появлялась новая страница. Каждый раз, когда браузер перезагружал страницу из-за частичного изменения, весь контент приходилось пересылать, хотя менялась лишь часть информации. Это создавало дополнительную нагрузку на сервер и делало пропускную способность ограничивающим фактором производительности.
В 1996 году тег iframe был представлен в Internet Explorer ; как элемент объекта , [ нужна ссылка ] он может загружать часть веб-страницы асинхронно. В 1998 году группа Microsoft Outlook Web Access разработала концепцию объекта сценария XMLHttpRequest . [4] Во второй версии библиотеки MSXML он появился как XMLHTTP . [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] и Оддпост (2002). [9]
Google широко внедрил совместимый со стандартами кросс-браузерный Ajax с Gmail (2004 г.) и Google Maps (2005 г.). [10] В октябре 2004 года публичная бета-версия Kayak.com стала одним из первых крупномасштабных применений в электронной коммерции того, что их разработчики в то время называли «вещью xml http». [11] Это повысило интерес к Ajax среди разработчиков веб-программ.
Термин AJAX был публично использован 18 февраля 2005 года Джесси Джеймсом Гарреттом в статье под названием Ajax: новый подход к веб-приложениям , основанной на методах, используемых на страницах Google. [1]
5 апреля 2006 года Консорциум Всемирной паутины (W3C) опубликовал первый проект спецификации объекта XMLHttpRequest в попытке создать официальный веб-стандарт . [12] Последний вариант объекта XMLHttpRequest был опубликован 6 октября 2016 г. [13] а спецификация XMLHttpRequest теперь является живым стандартом . [14]
Технологии
[ редактировать ]
Термин Ajax стал обозначать широкую группу веб-технологий, которые можно использовать для реализации веб-приложения, которое взаимодействует с сервером в фоновом режиме, не вмешиваясь в текущее состояние страницы. В статье, в которой был предложен термин Ajax, [1] [3] Джесси Джеймс Гарретт объяснил, что используются следующие технологии:
- HTML (или XHTML ) и CSS для представления
- Объектная модель документа (DOM) для динамического отображения данных и взаимодействия с ними.
- JSON или XML для обмена данными и XSLT для манипуляций с XML.
- Объект XMLHttpRequest для асинхронной связи.
- JavaScript для объединения этих технологий
Однако с тех пор произошел ряд изменений в технологиях, используемых в приложениях Ajax, и в определении самого термина Ajax. XML больше не требуется для обмена данными и, следовательно, XSLT больше не требуется для манипулирования данными. Нотация объектов JavaScript (JSON) часто используется в качестве альтернативного формата для обмена данными. [15] хотя также можно использовать и другие форматы, такие как предварительно отформатированный HTML или обычный текст. [16] Различные популярные библиотеки JavaScript, включая JQuery , включают абстракции, помогающие выполнять запросы Ajax.
Примеры
[ редактировать ]Пример JavaScript
[ редактировать ]Пример простого Ajax-запроса с использованием метода GET , написанного на JavaScript .
get-ajax-data.js:
// This is the client-side script.// Initialize the HTTP request.let xhr = new XMLHttpRequest();// define the requestxhr.open('GET', 'send-ajax-data.php');// Track the state changes of the request.xhr.onreadystatechange = function () { const DONE = 4; // readyState 4 means the request is done. const OK = 200; // status 200 is a successful return. if (xhr.readyState === DONE) { if (xhr.status === OK) { console.log(xhr.responseText); // 'This is the output.' } else { console.log('Error: ' + xhr.status); // An error occurred during the request. } }};// Send the request to send-ajax-data.phpxhr.send(null);send-ajax-data.php:
<?php// This is the server-side script.// Set the content type.header('Content-Type: text/plain');// Send the data back.echo "This is the output.";?>Получить пример
[ редактировать ]Fetch — это собственный API JavaScript. [17] Согласно документации разработчиков Google , «Fetch упрощает выполнение веб-запросов и обработку ответов, чем при использовании более старого XMLHttpRequest».
fetch('send-ajax-data.php') .then(data => console.log(data)) .catch (error => console.log('Error:' + error));Пример ES7 async/await
[ редактировать ]async function 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 .
The fetch спецификация отличается от Ajax следующими важными способами:
- Обещание вернулось из
fetch()не будет отклоняться при статусе ошибки HTTP, даже если ответом является HTTP 404 или 500. Вместо этого, как только сервер ответит заголовками, обещание будет разрешено нормально (сokдля свойства ответа установлено значение false, если ответ не находится в диапазоне 200–299), и он будет отклонен только в случае сбоя сети или если что-то помешало завершению запроса. fetch()не будет отправлять файлы cookie из разных источников, если вы не установите параметр инициализации учетных данных . (С апреля 2018 года. В спецификации изменена политика учетных данных по умолчанию наsame-origin. Firefox изменился с версии 61.0b13.)
Преимущества
[ редактировать ]Ajax предлагает несколько преимуществ, которые могут значительно повысить производительность веб-приложений и удобство работы с ними. Сокращая трафик сервера и повышая скорость, Ajax играет решающую роль в современной веб-разработке. Одним из ключевых преимуществ Ajax является его способность отображать веб-приложения без необходимости извлечения данных, что приводит к снижению трафика сервера. Эта оптимизация сводит к минимуму время отклика как на стороне сервера, так и на стороне клиента, избавляя пользователей от необходимости терпеть загрузочные экраны. [18]
Более того, Ajax облегчает асинхронную обработку, упрощая использование XmlHttpRequest, что позволяет эффективно обрабатывать запросы на асинхронное получение данных. Кроме того, динамическая загрузка контента значительно повышает производительность приложения. [19]
Кроме того, Ajax имеет широкую поддержку во всех основных веб-браузерах, включая Microsoft Internet Explorer версии 5 и выше, Mozilla Firefox версии 1.0 и выше, Opera версии 7.6 и выше и Apple Safari версии 1.2 и выше. [20]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Jump up to: а б с Джесси Джеймс Гарретт (18 февраля 2005 г.). «Ajax: новый подход к веб-приложениям» . AdaptivePath.com. Архивировано из оригинала 10 сентября 2015 года . Проверено 19 июня 2008 г.
- ^ «Ajax — Руководства веб-разработчика» . Веб-документы MDN . Архивировано из оригинала 28 февраля 2018 года . Проверено 27 февраля 2018 г.
- ^ Jump up to: а б Уллман, Крис (март 2007 г.). Начало «Аякса» . рокс. ISBN 978-0-470-10675-4 . Архивировано из оригинала 5 июля 2008 года . Проверено 24 июня 2008 г.
- ^ Jump up to: а б «Статья по истории XMLHTTP от оригинального разработчика» . Alexhopmann.com. 31 января 2007 г. Архивировано из оригинала 23 июня 2007 г. Проверено 14 июля 2009 г.
- ^ «Спецификация интерфейса IXMLHTTPRequest из сети разработчиков Microsoft» . Msdn.microsoft.com. Архивировано из оригинала 26 мая 2016 года . Проверено 14 июля 2009 г.
- ^ Дутта, Сунава (23 января 2006 г.). «Собственный объект XMLHTTPRequest» . IEBlog . Майкрософт. Архивировано из оригинала 6 марта 2010 года . Проверено 30 ноября 2006 г.
- ^ «Динамический HTML и XML: объект XMLHttpRequest» . Apple Inc. Архивировано из оригинала 9 мая 2008 года . Проверено 25 июня 2008 г.
- ^ Хопманн, Алекс. «История XMLHTTP» . Блог Алекса Хопманна . Архивировано из оригинала 30 марта 2010 года . Проверено 17 мая 2010 г.
- ^ Тайнан, Дэн (1 октября 2007 г.). «16 величайших моментов в истории Интернета» . Предприниматель .
- ^ «Краткая история Аякса» . Аарон Шварц. 22 декабря 2005 г. Архивировано из оригинала 3 июня 2010 г. Проверено 4 августа 2009 г.
- ^ Инглиш, Пол (12 апреля 2006 г.). «Пользовательский интерфейс каяка» . Официальный техноблог Kayak.com . Архивировано из оригинала 23 мая 2014 года . Проверено 22 мая 2014 г.
- ^ ван Кестерен, Энн; Джексон, Дин (5 апреля 2006 г.). «Объект XMLHttpRequest» . W3.org . Консорциум Всемирной паутины. Архивировано из оригинала 16 мая 2008 года . Проверено 25 июня 2008 г.
- ^ Кестерен, Энн; Обур, Жюлиан; Сонг, Чонгки; Стин, Холлворд Р.М. «XMLHttpRequest Level 1» . W3.org . W3C. Архивировано из оригинала 13 июля 2017 года . Проверено 19 февраля 2019 г.
- ^ «Стандарт XMLHttpRequest» . xhr.spec.whatwg.org . Проверено 21 апреля 2020 г.
- ^ «Обозначение объектов JavaScript» . Апач.орг. Архивировано из оригинала 16 июня 2008 года . Проверено 4 июля 2008 г.
- ^ «Ускорьте работу своих приложений на основе Ajax с помощью JSON» . DevX.com. Архивировано из оригинала 4 июля 2008 года . Проверено 4 июля 2008 г.
- ^ «Fetch API — веб-API» . МДН . Архивировано из оригинала 29 мая 2019 года . Проверено 30 мая 2019 г.
- ^ «Что такое AJAX? Преимущества и недостатки Ajax?» . магаплаза. Архивировано из оригинала 6 октября 2023 года . Проверено 6 октября 2023 г.
- ^ «Что такое AJAX? Преимущества и недостатки Ajax. Преимущества и недостатки AJAX — вы о них знаете» . ПОТЕНЦА. Архивировано из оригинала 6 октября 2023 года . Проверено 6 октября 2023 г.
- ^ «Топ-5+ преимуществ и недостатков AJAX» . ПОТЕНЦА. Архивировано из оригинала 6 октября 2023 года . Проверено 6 октября 2023 г.
Внешние ссылки
[ редактировать ]
- [1] Ajax: новый подход к веб-приложениям — статья, в которой введён термин Ajax, а также вопросы и ответы.
- Ajax (программирование) в Curlie
- Учебное пособие по Ajax с примерами GET, POST, текста и XML.
