Войти
| Впервые появилось | Март 1999 г. |
|---|---|
| Имя файла расширения | .js |
| Форматы файлов | JavaScript |
| Под влиянием | |
| JavaScript и XML | |
Ajax (также AJAX ; сокращение от «Асинхронный JavaScript и XML ») - это набор методов веб-разработки, использующих многие веб-технологии на стороне клиента для создания асинхронные веб-приложения. С помощью Ajax веб-приложения могут отправлять и получать данные с сервера асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы. Отделив уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, в более широком смысле, веб-приложениям динамически изменять контент без необходимости перезагружать всю страницу. На практике современные реализации обычно используют JSON вместо XML.
Ajax - это не отдельная технология, а скорее группа технологий. HTML и CSS могут использоваться в комбинации для разметки и стилизации информации. Затем веб-страницу можно изменить с помощью JavaScript, чтобы она динамически отображала новую информацию и позволяла пользователю взаимодействовать с ней. Встроенный объект XMLHttpRequest или с 2017 года новая функция «fetch ()» в JavaScript обычно используется для выполнения Ajax на веб-страницах, позволяя веб-сайтам загружать контент на экран без обновления страницы. Ajax - это не новая технология или другой язык, это просто существующие технологии, используемые по-новому.
В начале-середине 1990-х годов большинство Web сайтов были основаны на полных HTML-страницах. Каждое действие пользователя требовало загрузки с сервера полностью новой страницы. Этот процесс был неэффективным, что отражалось в опыте пользователя: все содержимое страницы исчезло, затем появилась новая страница. Каждый раз, когда браузер перезагружал страницу из-за частичного изменения, все содержимое приходилось повторно отправлять, даже если изменилась только часть информации. Это создало дополнительную нагрузку на сервер и сделало пропускную способность ограничивающим фактором производительности.
В 1996 году тег iframe был введен в Internet Explorer ; подобно элементу объекта, он может загружать или извлекать контент асинхронно. В 1998 году команда Microsoft Outlook Web Access разработала концепцию объекта сценария XMLHttpRequest. Он появился как XMLHTTP во второй версии библиотеки MSXML, которая поставлялась с Internet Explorer 5.0 в марте 1999 года.
Функциональность Windows XMLHTTP Элемент управления ActiveX в IE 5 был позже реализован в Mozilla, Safari, Opera и других браузерах как объект XMLHttpRequest JavaScript. Microsoft приняла собственную модель XMLHttpRequest начиная с версии Internet Explorer 7. Версия ActiveX по-прежнему поддерживается в Internet Explorer, но не в Microsoft Edge. Полезность этих фоновых запросов HTTP и асинхронных веб-технологий оставалась довольно непонятной, пока не стала появляться в крупномасштабных онлайн-приложениях, таких как Outlook Web Access (2000) и Oddpost (2002).
Google широко развернул совместимый со стандартами кросс-браузер Ajax с Gmail (2004) и Google Maps (2005). В октябре 2004 года публичная бета-версия Kayak.com стала одним из первых крупномасштабных применений того, что их разработчики в то время называли «xml http», в электронной коммерции. Это повысило интерес к AJAX среди разработчиков веб-программ.
Термин AJAX был публично использован 18 февраля 2005 г. Джесси Джеймсом Гарретом в статье под названием Ajax: новый подход к веб-приложениям, основанный на методах, используемых на страницах Google.
5 апреля 2006 г. Консорциум Всемирной паутины (W3C) выпустил первый проект спецификации для объекта XMLHttpRequest в попытке создать официальный веб-стандарт. Последний черновик объекта XMLHttpRequest был опубликован 6 октября 2016 года, и спецификация XMLHttpRequest теперь является жизненным стандартом.
Традиционная модель для веб-приложения по сравнению с приложением, использующим Ajax Термин Ajax стал обозначать широкую группу веб-технологий, которые можно использовать для реализации веб-приложения, которое взаимодействует с сервером в фоновом режиме, не влияя на текущее состояние страницы. В статье, в которой был введен термин Ajax, Джесси Джеймс Гарретт объяснил, что используются следующие технологии:
С тех пор, однако, появилось несколько разработки в технологиях, используемых в приложении Ajax, и в определении самого термина Ajax. XML больше не требуется для обмена данными, и, следовательно, XSLT больше не требуется для манипулирования данными. Нотация объектов JavaScript (JSON) часто используется в качестве альтернативного формата для обмена данными, хотя также могут использоваться другие форматы, такие как предварительно отформатированный HTML или простой текст. Множество популярных библиотек JavaScript, включая JQuery, включают абстракции, помогающие выполнять запросы Ajax.
Пример простого запроса 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 - успешный возврат. если (xhr.readyState === DONE) {если (xhr.status === ОК) {console.log (xhr.responseText); // 'Это результат.' } else {console.log ('Ошибка:' + xhr.status); // Ошибка при запросе. }}}; // Отправляем запрос на send-ajax-data.php xhr.send (null);send-ajax-data.php:
Многим разработчикам не нравится синтаксис, используемый в объекте XMLHttpRequest, поэтому были созданы некоторые из следующих обходных путей.
В популярной библиотеке JavaScript jQuery реализованы абстракции, которые позволяют разработчикам более удобно использовать Ajax. Хотя он по-прежнему использует XMLHttpRequest за кулисами, ниже приведена клиентская реализация того же примера, что и выше, с использованием метода ajax.
$.ajax ({type: 'GET', url: 'send-ajax-data.php', dataType: "JSON", // тип данных, ожидаемый при успешном завершении сервера: function (data) {console.log ( данные);}, ошибка: функция (ошибка) {console.log ('Ошибка:' + ошибка);}});jQuery также реализует метод get, который позволяет писать тот же код более кратко.
$.get ('send-ajax-data.php'). Done (function (data) {console.log (данные);}). сбой (функция (данные) {console.log ('Ошибка:' + данные);});Fetch - это новый собственный JavaScript API. Согласно документации разработчиков Google, «Fetch упрощает выполнение веб-запросов и обработку ответов, чем при использовании более старого XMLHttpRequest».
fetch ('send-ajax-data.php').then (data =>console.log (data)).catch (error =>console.log ('Error:' + error));Пример async / await ES7:
async function doAjax () {try {const res = await fetch ('send-ajax-data.php'); const data = ждать res.text (); console.log (данные); } catch (ошибка) {console.log ('Ошибка:' + ошибка); }} doAjax ();Как видно выше, выборка основана на обещаниях JavaScript .
 | Викискладе есть материалы, связанные с AJAX (программирование). |
 | В Викиучебниках есть книга по теме: AJAX |
