Министерство Образования Российской Федерации
Санкт-Петербургский Государственный Электротехнический Университет «ЛЭТИ»
Кафедра МО ЭВМ
Реферат по дисциплине «Человеко-машинное взаимодействие» на тему
«Ajax — подход к разработке веб-приложений»
Преподаватель: Первицкий А.Ю.
Выполнил: студент гр. 3351
Ерёменок А.В.
Санкт-Петербург
2007
-
Оглавление
2.Введение 3 2.1 Что такое Ajax 3 2.2 Термины 3 2.3 Содержание подхода 4 2.4 Преимущества и посылки к развитию 6 3.Развитие Ajax 6 3.1 Обзор Ajax-библиотек 6 Dojo — многофункциональный JavaScript инструментарий 6 Google Web Toolkit — инструментарий для Java-разработчиков 7 jQuery — JavaScript библиотека 8 xajax — PHP и JavaScript библиотека 8 3.2 Проблемы Ajax 8 3.3 Перспективы Ajax 9 4.Заключение 9 5.Источники 10
- ^
Ajax - метод разработки Web-приложений, который использует код на машине клиента для изменения данных на Web-сервере. В результате Web-страницы динамически обновляются без перезагрузки полной страницы, прерывающей обмен данными. Ajax позволяет создавать более богатые, более динамические пользовательские интерфейсы для Web-приложений, которые приближаются по скорости и гибкости к приложениям, выполняющимся в клиентской части кода. AJAX — это не самостоятельная технология, а скорее концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:
использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например:
использование DHTML для динамического изменения содержания страницы;
В качестве формата передачи данных обычно используются JSON или XML.
Термины ^ или DHTML — это способ создания интерактивного веб-сайта, используя сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).
Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану.
JavaScript - язык программирования, являющийся надстройкой стандарта HTML. Значительно расширяет возможности документа, созданного в этом формате. Модуль, написанный на JavaScript, интегрируется в файл HTML как подпрограмма. Вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Может существовать как отдельный файл.
XML - Расширяемый язык гипертекстовой разметки, один из языков для создания web-страниц. Открытый стандарт, поддерживаемый форумом W3C. Аналогично HTML, использует структуру тегов, однако, в отличие от HTML, определяет не отображение элементов гипертекстового документа, а содержание этих элементов. Кроме того, XML предоставляет разработчику возможность определения и введения собственных тегов. XML поддерживает электронные транзакции в системах B2B и, как ожидается, станет доминирующим форматом электронного документооборота.
JSON (англ. ^ ) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.
- ^
Использование Ajax начинается с JavaScript-объекта, называемого XMLHttpRequest . Как и предполагает имя, он позволяет в клиентской части вашего кода выполнять HTTP-запросы и анализирует ответ XML-сервера. Первый шаг в изучении Ajax - создание данных объекта XMLHttpRequest . Метод протокола HTTP при использовании для запроса (GET или POST ) и пути затем устанавливаются в объекте XMLHttpRequest .
"A" в слове Ajax обозначает "асинхронный". Когда вы посылаете HTTP-запрос, вы не хотите, чтобы браузер повис, ожидая ответа сервера. Вместо этого вы хотите также реагировать на действие пользователя на странице и работать с ответом сервера, когда тот в конечном итоге придет. Чтобы выполнить это, вам нужно зарегистрировать функцию обратного вызова с помощью XMLHttpRequest и послать асинхронно запрос XMLHttpRequest . Контроль останется за браузером, а функция обратного вызова будет вызвана, когда придет ответ сервера.
На Web-сервере запрос придет так же, как и любой другой HttpServletRequest . После анализа параметров запроса, сервлет выполнит все необходимые действия для приложения, сериализует его запрос в формате XML и вписывает его в HttpServletResponse .
Возвращаясь к клиенту, функция обратного вызова, зарегистрированная в XMLHttpRequest , теперь выполняется для того, чтобы обработать XML-документ, возвращаемый сервером. Наконец, пользовательский интерфейс обновляется в соответствии с данными сервера, используя JavaScript-код для преобразования страницы.
Рисунок 1 - диаграмма последовательности изучения Ajax.

- ^
- Использование AJAX позволяет значительно, сократить трафик при работе с веб-приложением, благодаря тому, что часто вместо загрузки всей страницы достаточно, загрузить только небольшую изменившуюся часть.
Уменьшение нагрузки на сервер
- AJAX позволяет несколько снизить нагрузку на сервер, к примеру, в Gmail когда вы отмечаете прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции, вместо необходимости повторно создавать страницу и отсылать ее клиенту.
Увеличение скорости реакции интерфейса
- Поскольку нужно загрузить только изменившуюся часть, то пользователь видит результат своих действий быстрее.
-
- ^
Рассмотрим наиболее распространенные библиотеки
Dojo — многофункциональный JavaScript инструментарий Особенности
Асинхронная связь
Одной из важных особенностей AJAX-приложений является асинхронная связь между браузером и сервером: благодаря обмену информацией, вид страницы обновляется без перезагрузки страницы. Обычно это делается с помощью JavaScript-объекта XMLHttpRequest. Dojo предоставляет класс-"обертку" (dojo.io.bind), который позволяет абстрагироваться от различных реализаций XMLHttpRequest в браузерах, в том числе работающих через iframe. Используя эту технологию, становится просто создавать приложения, передающих вводимые пользователем данные на сервер. Сервер может ответить на это определённым яваскриптом и обновить вид страницы.
Javascript-программирование
Dojo поддерживает разработку и распространение собственных элементов интерфейса и включает в себя библиотеку утилит для манипуляций с DOM.
Система событий, которая позволяет реагировать не только на события DOM, но и на другие события, такие как, например, вызов определённой функции. Это позволяет в большей степени использовать аспектно-ориентированное программирование.
Абстрагированный интерфейс для манипулирования JavaScript-классами, предоставляющий возможность наследования и позволяющий расширять существующие классы с помощью набора функций, вместо того, чтобы управлять непосредственно прототипами объектов.
Абстракция от среды выполнения; Dojo предоставляет возможности для определения и работы с различными веб-браузерами и другими средами выполнения JavaScript (такими как Rhino)
Dojo предоставляет систему пакетов, облегчающую модульную разработку функциональности пакетов и суб-пакетов. «Загрузочный» скрипт инициализирует набор иерархических пакетных пространств имён: «io», «event», и т. д. — внутри корневого пространства имён «dojo». После инициализации корневого пространства имён, любой пакет Dojo может быть загружен (с помощью XMLHttpRequest или сходного способа) с помощью специальных функций загрузочного скрипта. Возможно также инициализировать дополнительные пространства имён внутри или вне пространства имён «dojo», что позволяет расширять dojo или разрабатывать закрытые пространства имён для сторонних библиотек и приложений. Пакет dojo может содержать множество файлов. Любой пакет или файл могут определять зависимости от других файлов или пакетов. Когда такой пакет загружается, все необходимые зависимости подгружаются автоматически.
^
Dojo предоставляет абстрактное хранилище данных на стороне клиента — Dojo Storage. Dojo Storage позволяет веб-приложениям хранить мегабайты данных на стороне клиента, постоянно и защищенно, с правами пользователя. Это работает для всего существующего веба, включая Internet Explorer, Mozilla Firefox и Safari. Будучи включенной в веб-страницу, Dojo Storage определяет лучший метод хранения информации. Для Firefox 2 используется «родной» интерфейс, в других браузерах используется скрытый Flash-апплет. Так как Flash 6+ установлен на около 95 % компьютеров по всему миру, этот механизм хранения информации доступен большинству. Для тех веб-приложений, которые загружаются из файловой системы (то есть URL=file://…), Dojo Storage будет прозрачно использовать XPCOM в Firefox или ActiveX в Internet Explorer. Программист, использующий dojo, не обязан задумываться о тонкостях реализации — он просто получает в свои руки абстрагированные методы put() и get().
Недостатки
Dojo часто критикуют за недостаток документации. В ответ на эту критику с ноября 2006го года доступна документация по Dojo в виде книги по Dojo и автогенерированного Dojo API
-
Особенности
Используя GWT разработчики могут быстро писать и отлаживать AJAX приложения на языке Java используя инструментарий отладки Java. Когда приложение загружено компилятор GWT переведёт код Java приложения в соответствующий браузеру JavaScript и HTML.
GWT Hosted Web Browser - Позволяет запускать GWT приложения в режиме hosted (приложения запускаются как Java код в JVM без компиляции в JavaScript).
JRE emulation library - Реализация часто используемых стандартных Java классов на JavaScript.
GWT Web UI class library - Множество пользовательских интерфейсов и классов для создания виджетов
Недостатки
Недостаточность обеспечения для удачного разделения
Лучшей практикой в разработке современных Web-приложений считается создание страниц, которые работают без JavaScript-кода, и затем используют его там, где необходимо украсить и добавить дополнительные функции. В GWT, если не использовать JavaScript, вы не можете получить UI-интерфейса вообще.
Интернационализация
Поскольку Java-классы GWT-клиента запускаются в браузере, они могут не иметь доступа к возможностям или к узлам источников, чтобы взять находящиеся там строки кода во время выполнения. Конечно, можно применить сложный искусственный прием, который потребует субкласса для создания каждого класса клиента в каждом месте действия (см. Ресурсы), но GWT-инженеры работают над более эффективным решением этой проблемы.
- ^
Особенности
переход по дереву DOM, включая поддержку XPath как плагина
события
визуальные эффекты
JavaScript плагины
jQuery включается в веб-страницу как один внешний JavaScript файл
- ^
Особенности
cовместим с PHP 4.3 и выше
кросс-браузерная реализация Ajax
формирование HTML-форм и документов в PHP, используя классы xajax-библиотеки.
механизм плагинов + реализованный в качестве примера плагин для внедрения Goggle Maps в свои веб-приложения.
не требует от разработчика знания Javascript
- ^
Интеграция со стандартными инструментами браузера
- Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад» предоставляющая пользователям возможность вернуться к просмотренным ранее страницам.
- Другой недостаток изменения контента страницы при постоянном URL, заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры.
- Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.
- Многие сервисы статистики ведут учет просмотров новых страниц сайта, для сайтов страницы которых широко используют AJAX, такая статистика теряет актуальность.
- ^
Cross Document Messaging
Производители браузеров и сообщество разработчиков обсуждают несколько возможных путей изменения элементов среды браузера, для того чтобы приспособить их для работы с Ajax mashup-приложениями. Web Hypertext Application Technology Working Group (WHATWG) предложила в разделе 7.3 своего документа Web Applications 1.0 Working Draft механизм, называемый Cross Document Messaging. Браузер Opera уже реализует эту функциональность. Данный механизм определяет метод взаимодействия между DOM-объектами из различных доменов, позволяющий получателю выбирать, на какие сообщения отвечать, основываясь на их происхождении.
Межсайтовые расширения существующего объекта XMLHttpRequest
Ян Хиксон (Ian Hickson) (работавший в Opera, а сейчас в Google) предложил межсайтовые расширения существующего объекта XMLHttpRequest . Его предложение заключается в нескольких изменениях способа выполнения запросов, включая ограничения в управлении заголовком и механизм управления доступом.
JSON
Дуглас Крокфорд (Douglas Crockford), пропагандист JavaScript и разработчик в Yahoo!, является одним из общепризнанных в мире экспертов в языке JavaScript. Можно найти множество презентаций и статей, объясняющих сложные приемы работы с JavaScript на его персональном Web-сайте и на Yahoo! Developer Network. Еще одной инициативой, которую продвигает Крокфорд, является JSON, формат обмена данными, который широко используется в Ajax-приложениях, в основном потому, что он готов к работе в JavaScript и менее многословен по сравнению с XML. Крокфорд внес два предложения по встраиванию в браузеры элементов для mashup-приложений.
Заключение Из рассмотренного материала видно, что такой подход, как ajax, на сегодняшний день уже закрепил свои позиции в области веб-разработки. В то же время этот подход является динамично развивающимся. Посылками к этому развитию являются: общее развитие веб-технологий, общее развитие сред разработки, и одна из решающий предпосылок — развитие технологий подключения к интернет и как следствие — рост пропускных способностей каналов.
Видно также, что в наличии имеются множество технологий, реализующих ajax-подход. Это позволяет гибко применять их с учетом особенностей каждого проекта.
Источники |