Введение в Ajax для веб-приложений Java

В этом документе содержится введение в Ajax и описываются некоторые из функций в IDE NetBeans, позволяющий сделать программирование более быстрым и более эффективным процессом при работе с технологиями, связанными с Ajax. На примере низкоуровневых функциональных возможностей Ajax продемонстрирована разработка простого приложения с функцией автозаполнения текстового поля. В документе использованы материалы статьи Грега Мюррея (Greg Murray) и демонстрационное приложение из руководства Использование Ajax при помощи технологии Java.

Ajax – это аббревиатура, означающая "Асинхронный JavaScript и XML" (Asynchronous JavaScript and XML). Основное назначение Ajax состоит в предоставлении веб-приложению возможности эффективной обработки взаимодействия между пользователем и веб-страницей, при этом значительно снижаются требования к обновлению или полной перезагрузке страницы при каждом взаимодействии с пользователем. Такой подход предоставляет широкие возможности при использовании браузера (аналогичные возможностям настольного приложения или веб-приложения на основе подключаемого модуля). Обработка взаимодействия Ajax осуществляется асинхронно в фоновом режиме. Благодаря этому пользователь может продолжать работу со страницей. Взаимодействие Ajax инициируется посредством кода JavaScript. После выполнения взаимодействия Ajax код JavaScript обновляет исходный текст HTML для страницы. Изменения вносятся немедленно без необходимости обновления страницы. Взаимодействия Ajax могут использоваться для выполнения таких задач, как проверка правильности формата вводимых записей на основе серверной логики (непосредственно во время их ввода пользователем), извлечение подробных данных из сервера, динамическое обновление данных на странице и передача элементов форм страницы.

Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.

Open Source Edition 3.1.x или 4.x _ _ , версия 7.x или 8.x

Примечания

Установка Java EE в IDE позволяет при необходимости установить сервер GlassFish и контейнер сервлетов Apache Tomcat.

При этом предполагается, что читатель обладает практическими знаниями в области различных используемых технологий (т.е. HTML, CSS, JavaScript, Java и JSP). В этом документе приведен обзор функциональных возможностей, предоставляемых кодом, однако он не содержит каких-либо пояснений относительно кода на более детальном уровне.

Если необходимо сравнить проект с работающим решением, можно загрузить демонстрационное приложение.

Обзор приложения

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

Реализация функции автозавершения в поле поиска может служить примером возможностей, предоставляемых Ajax. Ajax использует объект XMLHttpRequest для асинхронной передачи запросов и ответов между клиентом и сервером. На следующем рисунке представлена блок-схема операций связи, происходящих между клиентом и сервером.

Для описания потока операций на блок-схеме можно использовать следующие действия.

Пользователь инициирует событие, например, отпускает клавишу при наборе имени. Это приводит к вызову функции JavaScript, которая инициализирует объект XMLHttpRequest .

Объект XMLHttpRequest настроен с учетом параметра запроса, который включает идентификатор элемента управления, инициировавшего событие, а также произвольное значение, введенное пользователем. Затем объект XMLHttpRequest выполняет асинхронный запрос к веб-серверу.

На веб-сервере осуществляется обработка этого запроса с использованием соответствующего объекта, например сервлета или прослушивающего процесса. Из хранилища данных извлекаются необходимые данные и подготавливается ответ, содержащий данные в форме документа XML.

Наконец, объект XMLHttpRequest получает данные XML с использованием функции ответного вызова, выполняет их обработку и обновляет модель DOM (Document Object Model, объектная модель документов) HTML для отображения страницы, содержащей новые данные.

В данном учебном курсе описан способ создания варианта автозаполнения путем выполнения потока операций процесса, показанного на рисунке выше. Сначала на стороне клиента создаются файлы для страницы представления данных и функции, необходимые для генерации объекта XMLHttpRequest . Затем выполняется настройка на стороне сервера, заключающаяся в создании хранилища данных и бизнес-логики с использованием технологий на основе Java. Наконец, на стороне клиента реализуется функция обратного вызова callback() и другие функциональные возможности JavaScript, необходимые для обновления DOM HTML.

Программирование на стороне клиента: часть 1

Сначала необходимо создать новый проект веб-приложения в среде IDE. Среда IDE уже содержит встроенные шаблоны для различных типов проекта.

Выберите команду "Файл" > "Новый проект". В области "Категории" выберите "Java Web". В области "Projects" (Проекты) выберите "Web Application" (Веб-приложение) и нажмите кнопку "Next" (Далее).

На экране "Имя и расположение" введите MyAjaxApp в поле "Имя проекта". Поле "Project Location" позволяет указать местоположение проекта. Для всех остальных параметров примите значения по умолчанию и нажмите кнопку "Далее".

На панели "Сервер и параметры настройки" выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE.

Подтвердите остальные значения по умолчанию и нажмите кнопку "Готово". Проект создается в файловой системе и открывается в среде IDE.

При создании веб-проектов на основе Java автоматически создается сценарий сборки Ant, отвечающий за компиляцию проекта, что позволяет немедленно развернуть и запустить его на сервере, зарегистрированном в среде IDE.

В редакторе исходного кода среды IDE создается и открывается страница ввода по умолчанию. В зависимости от целевого сервера эта страница ввода будет иметь вид index.jsp или index.html .

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

В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить".

Приложение компилируется, сервер приложений запускается, после чего приложение развертывается на этом сервере и выполняется. IDE открывает браузер по умолчанию и отображает страницу ввода по умолчанию.

Теперь, после выполнения проверки правильности настройки среды, можно приступить к преобразованию страницы-указателя в интерфейс автозавершения, который будет отображаться для пользователей.

Одним из преимуществ использования среды IDE является то, что используемый редактор обеспечивает возможность применения функции автозавершения кода, что позволяет опытным пользователям значительно увеличить свою производительность при написании кода. Редактор исходного кода среды IDE обеспечивает адаптацию к применяемой технологии благодаря чему при нажатии сочетания клавиш автозавершения кода CTRL+ПРОБЕЛ (при работе со страницей HTML) пользователю предлагаются варианты тегов HTML и атрибутов. Далее мы увидим, что то же самое справедливо и для других технологий, например, CSS и JavaScript.

Вторым важным преимуществом является возможность использования палитры в среде IDE. Эта палитра предоставляет удобные в работе шаблоны для элементов, часто используемых в технологиях программирования. Необходимо просто выбрать отдельный элемент и перетащить его в определенное место файла, открытого в редакторе исходного кода.

Для отображения крупных значков (как в примере) необходимо щелкнуть палитру правой кнопкой мыши и выбрать пункт "Отображать крупные значки".

Измените содержимое тегов <title> и <h1>`на`"Автоматическое завершение с использованием AJAX" Для страницы-указателя создание какого-либо кода на стороне сервера не требуется, так что можно удалить строки, созданные по умолчанию. Теперь должна появиться страница-указатель, аналогичная представленной ниже.

Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами <h1> можно скопировать и вставить следующий текст:

Добавьте к странице форму HTML. Для этого можно использовать элементы, содержащиеся в палитре среды IDE. Если палитра не открыта, выберите в главном меню "Окно" > "Палитра". Затем перейдите к узлу "Формы HTML", выберите элемент "Форма" и перетащите его на страницу под только что добавленные теги <p> . Появится диалоговое окно "Вставить форму". Введите следующее:

Нажмите кнопку "ОК". Теги HTML <form> вставляются в страницу, содержащую указанные атрибуты. (Метод GET применяется по умолчанию, и, следовательно, не объявляется явно).

Добавьте к странице таблицу HTML. В категории палитры "HTML" выберите элемент "Таблица" и перетащите его непосредственно под теги <form> . Откроется диалоговое окно "Вставить таблицу". Введите следующее:

Размер границы : 0

Заполнение ячеек: 5

Щелкните правой кнопкой мыши редактор исходного кода и выберите команду "Форматировать". Последует выравнивание кода. Теперь форма должна выглядеть следующим образом:

В первый столбец первой строки таблицы введите следующий текст (изменения выделены полужирным шрифтом):

Во второй столбец первой строки вместо перетаскивания поля "Ввод текста" из палитры введите указанный ниже код (изменения выделены полужирным шрифтом):

При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите <i , а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного варианта выбора нажатие CTRL+ПРОБЕЛ приведет к автоматическому завершению кода с использованием элемента с этим именем.

Атрибут onkeyup , введенный выше, указывает на функцию JavaScript с именем doCompletion() . Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше блок-схеме Ajax.

Редактор JavaScript в среде IDE предоставляет целый ряд расширенных возможностей редактирования, таких как интеллектуальное автозавершение кода, семантическое выделение, быстрое переименование, возможности переработки и многие другие функции.

Возможность автозавершения кода JavaScript автоматически предоставляется при кодировании в файлах .js , а также внутри тегов <script> и при работе с другими технологиями (например, HTML, RHTML, JSP, PHP). IDE может предоставить вам некоторые подсказки при редактировании кода JavaScript. Можно настроить наличие подсказок вариантов JavaScript, выбрав 'Сервис' > 'Параметры' ('NetBeans' > 'Предпочтения на Mac'), чтобы открыть окно 'Параметры' и выбрать язык JavaScript на вкладке 'Советы' в категории 'Редактор'. Также можно добавить собственные шаблоны кода JavaScript на вкладке 'Шаблоны кода' в окне 'Параметры'.

Добавьте файл JavaScript к приложению и выполните doCompletion() .

В окне "Проекты" щелкните правой кнопкой мыши узел "Веб-страницы" и выберите "Создать > Файл JavaScript". (Если файл JavaScript отсутствует в списке, выберите "Прочее". Затем выберите файл JavaScript из категории "Web" в мастере создания файла).

Задайте имя файла javascript и нажмите кнопку 'Готово'. Новый файл JavaScript отображается в окне 'Проекты' в папке 'Веб-страницы'.

Введите приведенный ниже код в файл javascript.js .

С помощью этого кода выполняется простая проверка совместимости веб-браузеров Firefox 3 и Internet Explorer версий 6 и 7). Если требуется добавить более надежный код, устраняющий ошибки совместимости, используйте сценарий для определения браузера с веб-сайта http://www.quirksmode.org.

Вернитесь к странице индекса и добавьте ссылку на файл JavaScript между тегами <head> .

Для быстрого перехода между страницами, открытыми в редакторе исходного кода, можно воспользоваться сочетанием клавиш CTRL+TAB.

Вставьте вызов init() после открывающего тега <body> .

Это обеспечит выполнение вызова init() при каждой загрузке страницы.

Роль doCompletion() состоит в следующем:

создание URL-адреса к местоположению, содержащему данные, которые могут использоваться на стороне сервера;

инициализация объекта XMLHttpRequest ;

запрос объекта XMLHttpRequest для передачи асинхронного запроса в сервер.

Объект XMLHttpRequest является основным объектом Ajax и своего рода фактическим стандартным решением для обеспечения асинхронной передачи данных XML по HTTP. Асинхронное взаимодействие подразумевает возможность продолжения обработки браузером событий на странице даже после передачи запроса. Данные передаются в фоновом режиме и могут автоматически загружаться на страницу без необходимости ее обновления.

Следует отметить, что объект XMLHttpRequest фактически создается с помощью функции initRequest() , которая вызывается функцией doCompletion() . Эта функция позволяет выполнять проверку возможности распознавания браузером запроса XMLHttpRequest , и – в случае положительного ответа – создавать объект XMLHttpRequest . В противном случае, с ее помощью выполняется проверка на ActiveXObject ( XMLHttpRequest для Internet Explorer 6), и если результат идентификации является положительным, создается ActiveXObject .

При создании объекта необходимо определить три параметра XMLHttpRequest : URL-адрес, метод HTTP ( GET или POST ) и допустимость использования асинхронного взаимодействия. В вышеупомянутом примере эти параметры определяются следующим образом:

URL-адрес autocomplete и текст, введенный пользователем в поле complete-field :

Если взаимодействие определено как асинхронное, необходимо указать функцию обратного вызова. Функция обратного вызова для этого взаимодействия определяется при помощи следующего оператора:

Затем следует определить функцию callback() . Взаимодействие HTTP инициируется при вызове XMLHttpRequest.send() . Это действие соответствует запросу HTTP, который передается на веб-сервер (см. представленную выше блок-схему).

Программирование на стороне сервера

В среде IDE предусмотрена полная поддержка серверного веб-программирования. Наряду с базовой поддержкой редактором многих популярных языков программирования и написания сценариев, поддерживаются также веб-службы, такие как SOAP, REST, SaaS, а также платформы, ориентированные на MVC, например JSF, Spring и Struts. Несколько подключаемых модулей NetBeans доступны в портале подключаемых модулей NetBeans для платформ под управлением Ajax, включая GWT и Struts2.

Бизнес-логика разрабатываемого приложения предполагает обработку запросов путем извлечения данных из хранилища данных, их последующую подготовку и передачу ответа. В данном случае этот принцип реализован с использованием сервлета. Перед началом написания кода сервлета необходимо настроить хранилище данных и функциональные возможности, требуемые для доступа к данным со стороны этого сервлета.

Для данного простого приложения создается класс с именем ComposerData , в котором данные о композиторах содержатся в хранилище `HashMap`. В HashMap можно сохранять пары связанных элементов в парах ключевых значений. Кроме того, следует создать класс Composer , который инициирует извлечение сервлетом данных из записей, содержащихся в хранилище HashMap .

Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите команду "Создать" > "Класс Java".

Дайте классу имя ComposerData и введите com.ajax в поле "Пакет". При этом создается новый пакет, в который будет включен этот класс, а также другие классы, которые будут созданы позже.

Нажмите кнопку "Завершить". Последует создание и открытие класса в редакторе исходного кода.

В редакторе исходного кода вставьте следующий код:

Вы увидите, что в левом поле редактора выводится предупреждение о том, что не удается найти класс Composer . Выполните следующие шаги для создания класса Composer .

Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите команду "Создать" > "Класс Java".

Дайте классу имя Composer и выберите com.ajax в раскрывающемся списке поля "Package". Нажмите кнопку "Завершить".

После нажатия кнопки 'Готово' в IDE создается класс, а файл открывается в редакторе исходного кода.

В редакторе исходного кода вставьте следующий код:

После создания класса Composer , если посмотреть на класс ComposerData в редакторе, вы увидите, что предупреждения больше не отображаются. Если в ComposerData по-прежнему отображаются аннотации с предупреждениями, можно попытаться устранить ошибку путем добавления отсутствующих операторов импорта.

Создайте сервлет для обработки URL-адреса autocomplete , получаемого при входящем запросе.

Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Создать' > 'Сервлет', чтобы открыть мастер создания сервлетов. (Выберите 'Другой' и выберите 'Сервлет' в меню 'Веб-категория', если сервлет не отображается по умолчанию во всплывающем меню).

Дайте сервлету имя AutoCompleteServlet и выберите com.ajax в раскрывающемся списке поля "Package". Нажмите кнопку 'Далее'.

На панели 'Настройка развертывания сервлета' измените шаблон адреса URL /autocomplete таким образом, чтобы он соответствовал адресу URL, заданному ранее в объекте XMLHttpRequest .

Использование этой панели позволяет пропустить этап добавления дополнительных сведений вручную к дескриптору развертывания.

При желании выберите "Добавить информацию о сервлете в дескриптор развертывания". После выполнения этих действий созданный проект получится таким же, как загруженный пример. В последней версии среды IDE сервлет по умолчанию регистрируется аннотацией @WebServlet вместо регистрации в дескрипторе развертывания. Тем не менее, проект будет работать, если использовать аннотацию @WebServlet вместо дескриптора развертывания.

Нажмите кнопку "Завершить". Сервлет будет создан и открыт в редакторе исходного кода.

Единственными методами, которые следует переопределить, являются метод doGet() для определения обработки сервлетом запроса autocomplete GET и метод init() , который должен инициировать ServletContext для того, чтобы сервлет имел доступ к другим классам приложения после его запуска.

Существует возможность переопределения методов из родительских классов с помощью контекстного меню "Вставить код" в среде IDE. Реализуйте init() , выполнив следующие шаги.

Поместите курсор в нижней части объявления класса AutoCompleteServlet в редакторе исходного кода. Нажмите ALT+INS (CTRL+I в Mac ОS) для открытия контекстного меню "Создать код".

Выберите команду "Переопределить метод". В появившемся диалоговом окне отображаются все родительские классы сервлета AutoCompleteServlet . Разверните узел GenericServlet и выберите init(Servlet Config config) .

Нажмите кнопку "ОК". Метод init() добавится в редактор исходного кода.

Добавьте переменную для объекта ServletContext и измените метод init() (изменения выделены полужирным шрифтом):

Добавьте оператор импорта для объекта ServletContext . Это можно сделать, выбрав значок лампочки, который отображается на экране в левом поле редактора исходного кода.

Метод doGet() должен преобразовать URL-адрес запроса, извлечь данные из хранилища данных и подготовить ответ в формате XML. Следует отметить, что объявление метода было сгенерировано при создании класса. Для просмотра, возможно, потребуется расширить методы HttpServlet, щелкнув значок развертывания в левом поле ( ).

Добавьте к классу следующие объявления переменных в нижней части объявления класса AutocompleteServlet :

При этом создается хранилище HashMap , включающее все данные о композиторах, которое затем используется методом doGet() .

Выполните прокрутку вниз до метода doGet() и реализуйте его следующим образом:

Итак, на этом примере создания сервлета можно убедиться, что написание кода на стороне сервера для обработки с использованием Ajax не требует каких-либо новых знаний. Для случаев, когда требуется обмен документами XML, тип содержимого ответа должен иметь значение text/xml . Кроме того, Ajax позволяет осуществлять обмен простыми текстами или даже фрагментами JavaScript, которые могут анализироваться или выполняться с использованием функции обратного вызова на стороне клиента. Обратите внимание на то, что некоторые браузеры могут кэшировать результаты, следовательно, может потребоваться установка заголовка HTTP "Cache-Control" на no-cache .

В этом примере сервлет генерирует документ XML, в котором содержатся все композиторы, имя или фамилия которых начинается с введенных пользователем символов. Этот документ соответствует данным XML, описанным в приведенной выше блок-схеме. Ниже приведен пример документа XML, который возвращается в объект XMLHttpRequest :

После завершения кода приложения можно воспользоваться функцией HTTP Monitor среды IDE для просмотра возвращенных данных XML.

Программирование на стороне клиента: часть 2

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