ПоставщикамБлог
Вход

Программирование на AJAX

Программирование на AJAX

AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится транслитом как «аякс» (по аналогии с мифологическим именем), но у аббревиатуры AJAX нет устоявшегося аналога на кириллице.

AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:

  • использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest (основной объект);
  • через динамическое создание дочерних фреймов;
  • через динамическое создание тега <script>;
  • через динамическое создание тега <img>, как это реализовано в Google Analytics;
  • использование DHTML для динамического изменения содержания страницы.

Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных.

Три из этих четырёх технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). По мнению некоторых специалистов (книг), средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.

В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.

Наиболее популярные продукты категории Программирование на AJAX Все продукты категории

F.A.Q Программирование на AJAX

Что такое AJAX?

AJAX - это аббревиатура, которая расшифровывается как асинхронный JavaScript и XML, и описывает набор методов разработки, используемых для создания веб-сайтов и веб-приложений. По словам веб-разработчика и инструктора WordPress по Skillcrush Энн Каскарано, лучший способ понять AJAX - начать с определения его конкретной цели в процессе веб-разработки. Основная функция AJAX заключается в асинхронном обновлении веб-содержимого («A» в AJAX), то есть веб-браузеру пользователя не требуется перезагружать всю веб-страницу, когда требуется изменить только небольшую часть содержимого на странице.

Одним из наиболее распространенных примеров асинхронного обновления является функция Google Suggest Google. Когда вы вводите поисковый запрос в строку поиска Google, и веб-сайт Google автоматически начинает предлагать варианты автозаполнения при вводе текста, это AJAX в действии. Содержимое на странице изменяется (в этом случае параметры автозаполнения в строке поиска) без необходимости вручную обновлять страницу (что делает использование Google Suggest непрактичным). Такие функции, как Google Suggest, являются фундаментальной частью современного просмотра веб-страниц, что указывает на важность AJAX в веб-разработке. В дополнение к Google Suggest Кашкарано говорит, что AJAX обычно используется для обновления таких функций, как строки состояния и уведомлений, онлайн-формы, разделы комментариев, а также опросы и опросы. Но что именно представляют собой «J» и «X» в AJAX и как они делают возможным асинхронное обновление?
JavaScript и XML

Как упоминалось выше, буква «J» в AJAX обозначает JavaScript. JavaScript является типом языка сценариев - языков программирования, используемых для автоматизации процессов веб-сайта, поэтому веб-разработчикам не нужно индивидуально программировать каждый экземпляр процесса, который появляется на странице. В случае JavaScript он используется специально для создания, добавления и управления динамическим контентом веб-сайта. Другими словами, после того, как языки разметки, такие как HTML и CSS, используются для создания и отображения статических веб-функций (заголовки, шрифты, абзацы и т. Д.), Затем JavaScript используется для управления функциями, которые требуют обновления в реальном времени, пока посетитель просматривает страницу. (например, интерактивные карты, анимированная графика, прокрутка видео, музыкальные автоматы и т. д.). Поскольку JavaScript занимается обновлением содержимого страницы, не требуя от зрителей перезагрузки целых страниц вручную, он является критически важным компонентом для асинхронного обновления AJAX.

«X» в AJAX - это XML (расширяемый язык разметки). Как следует из названия, XML является языком разметки, что означает, что он принадлежит к тому же семейству, что и языки, такие как HTML и CSS. Языки разметки - это языки кодирования, используемые для аннотирования частей веб-документа, которые предназначены для того, чтобы дать веб-браузерам инструкции о том, как понимать, обрабатывать и отображать веб-страницу, по сравнению с фактическим текстом, предназначенным для отображения на странице. В то время как HTML и CSS сосредоточены на указании способа отображения содержимого страницы (абзацы, заголовки, шрифты, цвета и т. Д.), XML используется для передачи данных, хранящихся на странице, в браузеры, которые ее просматривают. Отдельные компьютерные системы часто несовместимы друг с другом и не могут понимать или взаимодействовать с данными, отформатированными другой системой. XML позволяет разработчикам обойти это препятствие, сохраняя данные в текстовом формате между тегами XML. Делая это, XML предлагает способ хранения, перемещения и обмена данными, которые не зависят от конкретной программной или аппаратной системы (что крайне важно для Интернета, где данные должны быть доступны и понятны для всех программных и аппаратных платформ). ). RSS-каналы - подписные веб-каналы, позволяющие пользователям получать доступ к контенту из блогов и источников новостей по мере их обновления в режиме реального времени, - построены с использованием XML и являются примером практических возможностей языка для обмена данными. Но как XML сочетается с JavaScript для формирования AJAX?

Как работает AJAX?

Согласно Cascarano, JavaScript и XML объединяются, чтобы обеспечить асинхронное обновление посредством использования объекта, называемого объектом XMLHttpRequest. Когда пользователь посещает веб-страницу, предназначенную для использования AJAX, и происходит предписанное событие (пользователь загружает страницу, нажимает кнопку, заполняет форму и т.д.) JavaScript создает объект XMLHttpRequest, который затем передает данные в XML формат между веб-браузером (программа, используемая для просмотра веб-сайта) и веб-сервером (программное или аппаратное обеспечение, на котором хранятся данные веб-сайта). Объект XMLHttpRequest отправляет запрос на обновленные данные страницы на веб-сервер, сервер обрабатывает запрос, ответ создается на стороне сервера и отправляется обратно в браузер, который затем использует JavaScript для обработки ответа и отображения его на экране как обновленный контент.

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

Материалы