Ajax для Java разработчиков Часть 2. Cпособы сериализации данных для Ajax


Оглавление (нажмите, чтобы открыть):

Технология AJAX

AJAX (аббревиатура от Asynchronous JavaScript and XML) – это технология взаимодействия с сервером без перезагрузки страницы. Поскольку не требуется каждый раз обновлять страницу целиком, повышается скорость работы с сайтом и удобство его использования.

История технологии

Многие технологии, которые используются в AJAX, известны еще с 1990-х годов. Так, в 1996 году в Internet Explorer 3 применялся HTML-элемент IFRAME, а в 1998 году компания Microsoft предложила подход Remote Scripting.

Непосредственно термин AJAX впервые был использован Джесси Джеймсом Гарретом 18 февраля 2005 года в статье «Ajax: A New Approach to Web Applications». Ее автор является одним из основателей и главой компании Adaptive Path. В своей статье он описал принцип разработки web-приложений, применяемый на тот момент в Google Maps и Gmail. По его словам, это стало «фундаментальным прорывом в возможностях, доступных в веб-приложениях».

Тогда же господин Гаррет объяснил, что такое AJAX, дал название этому подходу и обратил внимание непосредственно на возникший тренд. Все это позволило вывести разработку web-приложений на принципиально новый уровень. Теперь мы можем на своем дисплее наблюдать результаты «фонового» обмена данными браузера с сервером.

По механизму работы страницы сразу можно сказать, что это AJAX сайт. Раньше пользователь должен был нажимать на кнопки и переходить по ссылкам для подтверждения своих действий. А теперь страница сама реагирует на внесение данных нужным образом. В результате время, затраченное на общение с сайтом, заметно сокращается. Пользователь общается с быстрореагирующим веб-приложением. Для его нормальной работы достаточно браузера, поддерживающего JavaScript, и подключения к Интернету.

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

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

Понять основной принцип работы AJAX помогает представленное ниже изображение:

В работе технологии можно выделить 4 основных этапа:

  1. Пользователь вызывает AJAX. Обычно это реализуется с помощью какой-либо кнопки, предлагающей получить больше информации.
  2. Система отправляет на сервер запрос и всевозможные данные. Например, может потребоваться загрузка определенного файла либо конкретных сведений из базы данных.
  3. Сервер получает ответ от базы данных и отправляет информацию в браузер.
  4. JavaScript получает ответ, расшифровывает его и выводит пользователю.

Для обмена данными на странице создается объект XMLHttpRequest, он будет выполнять функцию посредника между браузером и сервером. Запросы могут отправляться в одном двух типов – GET и POST. В первом случае обращение производится к документу на сервере, в роли аргумента ему передается URL сайта. Для предотвращения прерывания запроса можно воспользоваться функцией JavaScript Escape. Для больших объемов данных применяется функция POST.

Серверная часть обрабатывает поступающие данные и на их основании создает новую информацию, которая будет отправлена клиенту.

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

В качестве ответа сервер использует простой текст, XML и JSON. В первом случае результат можно сразу же отобразить на странице. При получении XML-документа его обычно конвертируют в HTML и выводят на экран. Если ответ получен в формате JSON, клиенту следует выполнить полученный код. После этого будет сформирован объект JavaScript.

Преимущества технологии AJAX

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

Снижение нагрузки на сервер. Грамотное использование AJAX позволяет многократно уменьшить нагрузку на сервер. Например, можно использовать шаблон для создания постоянных элементов сайта: логотипа, меню и т. п. Кроме того, для удовлетворения конкретного запроса не нужно обновлять всю страницу. Например, при голосовании на сайте пользователь выбирает нужный пункт, нажимает кнопку, информация отправляется на сервер, после чего приходит ответ. В течение всего этого времени обновления страницы не происходит.

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

Широкий спектр возможностей. Использование AJAX не ограничивается формами. Например, при прохождении регистрации на некоторых сервисах пользователь вводит логин – и через мгновение ему выдается информация о том, свободен он или нет. Также при введении поискового запроса в Google после каждой буквы или слова предлагается несколько вариантов запроса. Это значительно повышает комфорт работы с сайтами.

Недостатки AJAX

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

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

Ухудшение безопасности. Заметным недостатком AJAX также являются пробелы в безопасности, ведь исходный код каждый может прочитать в браузере.

Невозможность установить число обращений. Механизм динамической подгрузки контента заметно искажает данные статистики. Ведь в этом случае при перемещении пользователя по различным страницам не выполняется операция их перезагрузки. И обычный счетчик не регистрирует переход. Для крупных проектов такое искусственное занижение количества просмотров приводит к значительному падению доходов.

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

Индексирование AJAX поисковиками

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

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

Чтобы минимизировать негативное влияние AJAX на SEO, сайт можно оптимизировать следующим образом:

  1. Перепишите ссылки в URL. После каждой # необходимо поставить восклицательный знак.
    Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.
  2. Для всех страниц AJAX версию HTML следует сделать доступной по определенному адресу. В нем установленное нами сочетание «#!» Необходимо заменить на «?_escaped_fragment_=». (В нашем примере http://www.site.ru/?_escaped_fragment_=uslugi).
  3. На странице AJAX нужно проставить тег: .
  4. Карта сайта в формате .xml ускорит индексацию его страниц.
  5. После индексации ресурса сравните его версию AJAX с сохраненной копией. Это позволит увидеть, все ли страницы проиндексированы ботами.

Влияние AJAX на ранжирование

Сайты с технологией AJAX могут иметь худшую репутацию у поисковых систем в сравнении с аналогичными ресурсами без ее использования. Среди основных причин:

  • вероятность, что поисковые боты не учтут весь контент;
  • бесполезная адресная строка (у всех страниц одинаковый адрес);
  • робот может видеть не то содержание страницы, что отображается пользователю.

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

Динамические страницы можно кэшировать и отображать их в качестве статических. Для вызова AJAX лучше воспользоваться классическим якорем, чем событием «onClick».

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

AJAX с помощью jQuery. Руководство для начинающих. Часть 1

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

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

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Что такое AJAX и чем он полезен?

AJAX является техникой разработки веб приложений, в которых JavaScript код, выполняющийся в браузере посетителя, связывается с веб сервером асинхронно , то есть в фоновом режиме. Отличие от обычных веб приложений заключаются в следующем:

  • Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
  • При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

Так как запрос AJAX выполняется в фоновом режиме, то код JavaScript (и посетитель) может продолжать работу со страницей во время обработки запроса. Процесс скрыт от посетителя, которому не нужно покидать страницу, которую он просматривает в данный момент времени. Такой подход делает страницы с AJAX очень приятными в работе.

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest . Он предоставляет ряд методов, таких как open() , send() и onreadystatechange() , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

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

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение — запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

. хотя можно также запросить статический документ:

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

AJAX запрос — асинхронный , что означет его выполнение в фоновом режиме, когда остальной код JavaScript продолжает действовать. Как же в таком случае получать ответ от сервера, когда завершится запрос?

Вам нужно написать возвратную функцию , которая будет автоматически выполняться по завершению запроса AJAX и отправке ответа сервером. Как минимум, ваша функция должна принимать данные, возвращаемые сервером, как свой первый аргумент:

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:

Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :

Открываем showForecast.html в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

  1. showForecast.html содержит элемент button «Получить прогноз погоды» с ID getForecast .
  2. JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
  3. Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
  4. Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
  5. Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.
  6. Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.


Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 5 Марта 2012
Просмотров: 162843
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Дата публикации: 2020-02-15

От автора: данная серия статей призвана познакомить front-end дизайнеров и начинающих разработчиков с технологией AJAX, основной front-end технологией. В первом уроке мы затронем основы AJAX, начнем узнавать различные детали данной технологии, узнаем, что это такое, как работает и какие есть ограничения.

Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.

Что такое AJAX?

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.

С помощью AJAX клиент (браузер) общается с сервером и запрашивает у него данные. Полученный ответ обрабатывается, и в станицу вносятся изменения без полной ее перезагрузки. Разберем аббревиатуру AJAX:

«Асинхронный» означает, что когда клиент запрашивает данные с сервера, браузер не зависает, пока не получит ответ. Пользователь наоборот может перемещаться по страницам. Как только сервер вернул ответ, в фоновом режиме ответ начинает обрабатываться соответствующими функциями.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.

Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.

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

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

На картинке описан стандартный AJAX сценарий:

Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.

Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.

База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.

JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.

Помня это, вы поймете, почему AJAX настолько важная технология в современном интернете. Разрабатывая приложения под управлением AJAX мы можем контролировать большие объемы данных, загружаемых с сервера.

Живой пример на AJAX

AJAX сейчас уже повсюду. Чтобы убедить вас в этом мы коротко рассмотрим несколько популярных сайтов, которые вовсю используют данную технологию.

Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.

Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.

Как создать запрос

Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.

Управление запросами

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:

How to use Servlets and Ajax?

I’m very new to web apps and Servlets and I have the following question:

Whenever I print something inside the servlet and call it by the webbrowser, it returns a new page containing that text. Is there a way to print the text in the current page using Ajax?

7 Answers 7

Indeed, the keyword is «ajax»: Asynchronous JavaScript and XML. However, last years it’s more than often Asynchronous JavaScript and JSON. Basically, you let JS execute an asynchronous HTTP request and update the HTML DOM tree based on the response data.

Since it’s pretty a tedious work to make it to work across all browsers (especially Internet Explorer versus others), there are plenty of JavaScript libraries out which simplifies this in single functions and covers as many as possible browser-specific bugs/quirks under the hoods, such as jQuery, Prototype, Mootools. Since jQuery is most popular these days, I’ll use it in the below examples.

Kickoff example returning String as plain text

Create a /some.jsp like below (note: the code doesn’t expect the JSP file being placed in a subfolder, if you do so, alter servlet URL accordingly):

Create a servlet with a doGet() method which look like this:

Map this servlet on an URL pattern of /someservlet or /someservlet/* as below (obviously, the URL pattern is free to your choice, but you’d need to alter the someservlet URL in JS code examples over all place accordingly):

Or, when you’re not on a Servlet 3.0 compatible container yet (Tomcat 7, Glassfish 3, JBoss AS 6, etc or newer), then map it in web.xml the old fashioned way (see also our Servlets wiki page):

Now open the http://localhost:8080/context/test.jsp in the browser and press the button. You’ll see that the content of the div get updated with the servlet response.

Returning List as JSON

With JSON instead of plaintext as response format you can even get some steps further. It allows for more dynamics. First, you’d like to have a tool to convert between Java objects and JSON strings. There are plenty of them as well (see the bottom of this page for an overview). My personal favourite is Google Gson. Download and put its JAR file in /WEB-INF/lib folder of your webapplication.

Here’s an example which displays List as

    . The servlet:

Do note that jQuery automatically parses the response as JSON and gives you directly a JSON object ( responseJson ) as function argument when you set the response content type to application/json . If you forget to set it or rely on a default of text/plain or text/html , then the responseJson argument wouldn’t give you a JSON object, but a plain vanilla string and you’d need to manually fiddle around with JSON.parse() afterwards, which is thus totally unnecessary if you set the content type right in first place.

Мастер Йода рекомендует:  8 советов, которые помогут вам правильно составлять Sass

Returning Map as JSON

Here’s another example which displays Map as :

Returning List as JSON

Here’s an example which displays List

in a

where the Product class has the properties Long id , String name and BigDecimal price . The servlet:

Returning List as XML

Here’s an example which does effectively the same as previous example, but then with XML instead of JSON. When using JSP as XML output generator you’ll see that it’s less tedious to code the table and all. JSTL is this way much more helpful as you can actually use it to iterate over the results and perform server side data formatting. The servlet:

The JSP code (note: if you put the

in a , it may be reusable elsewhere in a non-ajax response):

You’ll by now probably realize why XML is so much more powerful than JSON for the particular purpose of updating a HTML document using Ajax. JSON is funny, but after all generally only useful for so-called «public web services». MVC frameworks like JSF use XML under the covers for their ajax magic.

Ajaxifying an existing form

You can use jQuery $.serialize() to easily ajaxify existing POST forms without fiddling around with collecting and passing the individual form input parameters. Assuming an existing form which works perfectly fine without JavaScript/jQuery (and thus degrades gracefully when enduser has JavaScript disabled):

You can progressively enhance it with ajax as below:

You can in the servlet distinguish between normal requests and ajax requests as below:

The jQuery Form plugin does less or more the same as above jQuery example, but it has additional transparent support for multipart/form-data forms as required by file uploads.

Manually sending request parameters to servlet

If you don’t have a form at all, but just wanted to interact with the servlet «in the background» whereby you’d like to POST some data, then you can use jQuery $.param() to easily convert a JSON object to an URL-encoded query string.

The same doPost() method as shown here above can be reused. Do note that above syntax also works with $.get() in jQuery and doGet() in servlet.

Manually sending JSON object to servlet

If you however intend to send the JSON object as a whole instead of as individual request parameters for some reason, then you’d need to serialize it to a string using JSON.stringify() (not part of jQuery) and instruct jQuery to set request content type to application/json instead of (default) application/x-www-form-urlencoded . This can’t be done via $.post() convenience function, but needs to be done via $.ajax() as below.


Do note that a lot of starters mix contentType with dataType . The contentType represents the type of the request body. The dataType represents the (expected) type of the response body, which is usually unnecessary as jQuery already autodetects it based on response’s Content-Type header.

Then, in order to process the JSON object in the servlet which isn’t being sent as individual request parameters but as a whole JSON string the above way, you only need to manually parse the request body using a JSON tool instead of using getParameter() the usual way. Namely, servlets don’t support application/json formatted requests, but only application/x-www-form-urlencoded or multipart/form-data formatted requests. Gson also supports parsing a JSON string into a JSON object.

Do note that this all is more clumsy than just using $.param() . Normally, you want to use JSON.stringify() only if the target service is e.g. a JAX-RS (RESTful) service which is for some reason only capable of consuming JSON strings and not regular request parameters.

Sending a redirect from servlet

Important to realize and understand is that any sendRedirect() and forward() call by the servlet on an ajax request would only forward or redirect the ajax request itself and not the main document/window where the ajax request originated. JavaScript/jQuery would in such case only retrieve the redirected/forwarded response as responseText variable in the callback function. If it represents a whole HTML page and not an ajax-specific XML or JSON response, then all you could do is to replace the current document with it.

jQuery функция $.ajax()

Определение и применение

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

Обращаю Ваше внимание, что все AJAX методы jQuery используют эту функцию, она в основном используется для запросов, где другие методы не могут быть использованы.

jQuery синтаксис:

jQuery функция $.ajax() лежит в основе всех AJAX запросов, отправленных с использованием jQuery. Не смотря на то, что функция $.ajax() может использоваться более гибко, в большинстве случаев в этом нет необходимости. В jQuery существуют такие альтернативные методы как $.get() и .load() , которые проще в использовании.

В самом простом виде функция $.ajax() может быть вызвана без параметров:

Обращаю Ваше внимание, что параметры по умолчанию могут быть установлены глобально с использованием jQuery функции $.ajaxSetup(). В этом примере функция $.ajax() используется без параметров и просто загружает содержимое текущей страницы, но ничего не делает с результатом. Чтобы использовать результат, вы можете определить одну из функций обратного вызова.

Добавлен в версии jQuery

Значения параметров

Параметр Описание
url Строка, содержащая URL адрес, на который отправляется запрос.
settings Набор пар ключ/значение, которые настраивают запрос AJAX. Все параметры являются необязательными. Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.ajaxSetup().
Метод $.ajax() поддерживает следующие параметры:

accepts (по умолчанию: зависит от dataType).

Тип: PlainObject .
Набор пар ключ/значение, которые отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа. Например:

async (по умолчанию: true ).

Тип: Boolean .
По умолчанию, все запросы отправляются асинхронно, если вам необходимо организовать синхронные запросы, то установите этот параметр в false . Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение «jsonp» не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

Тип: Function ( jqXHR jqXHR, PlainObject settings ).
Функция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest , объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false , то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true , для dataType «script» и «jsonp» false ).

Тип: Boolean .
Если задано значение false , то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

Тип: Function ( jqXHR jqXHR, String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий «success» или «error»). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса («success», «notmodified», «nocontent», «error», «timeout», «abort», или «parsererror»). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

Тип: PlainObject .
Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: «application/x-www-form-urlencoded; charset=UTF-8»).

Тип: Boolean , или String .
Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false , в этом случае jQuery не передает в заголовке поле Content-Type совсем.

Тип: PlainObject .
При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window . Параметр context позволяет настроить контекст исполнения функции таким образом, что $( this ) будет ссылаться на определенный DOM элемент, или объект. Например:

Значения по умолчанию:
Тип: PlainObject .
Объект, содержащий тип данных для конвертации и способ его преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение ответа. Добавлен в версии jQuery 1.5.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).

Тип: Boolean .
Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true . Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

Тип: PlainObject , или String , или Array .
Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false . Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional, который позволяет задействовать традиционный тип сериализации основанный на методе $.param ).

Тип: Function ( String data, String type ) => Anything .
Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать «сырые» данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data — данные полученные от сервера в виде строки и type — тип этих данных (значение параметра dataType).

dataType (по умолчанию: xml, json, script, или html ).

Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):

  • «xml» — возвращает XML документ, который может быть обработан с помощью jQuery.
  • «html» — возвращает HTML как обычный текст, теги Клик

Использование Java Beans в AJAX

Я спрашиваю, потому что я только видел Java Beans, используемый с каркасом, как подпорки или JSF.

Можно ли отправить и получить доступ к Java Bean над запросом AJAX?

Servlet myServlet создает и заполняет экземпляр Java Bean, и устанавливает его в контексте запроса. Уже загружен JSP / HTML-страница использует AJAX для запроса данных из myServlet. Может ли этот компонент доступен в любом случае? Подумав некоторое время, я пришел, чтобы признать, что это не может быть сделано.

Если это не может быть сделано, что было бы лучшей практикой при попытке передать данные из модели (т.е. пользовательской информации из базы данных) асинхронно к клиенту при использовании Tomcat / сервлеты и JSP?

Вы все еще можете использовать распорки или JSF, как обычно для построения разметки (HTML). А затем потребляет разметку, который был построен с помощью AJAX, а затем добавить к йотам. Если вы знакомы с JQuery, что-то вроде JQuery ( «# селектор») нагрузки ( «actionUrl.action»). Но если вы хотите, чтобы исследовать Java Bean, то вам придется сериализовать его XML или JSON. Если вы используете веб-фреймворк, как struts2 или весной, то, скорее всего, механизм для выполнения этой сериализации для вас. Если вы хотите редактировать боб вам придется сериализовать, а затем редактировать сериализован фасоль, а затем десериализации обратно в Java Bean.

Технически это возможно , если вы сериализации JavaBean в массив байтов или даже в кодировке Base64 , используя обычный Java сериализации API .

Но как бы это когда-либо имеет смысл использовать собственный формат для передачи данных вокруг? Как бы не-Java клиентов (например, JavaScript!) Никогда не сможет потреблять сериализированную объект Java? В эти дни XML, JSON и даже CSV намного более широкая поддержка и приняты. Практически каждый самостоятельно уважаться язык программирования имеет инструменты, чтобы легко преобразовать между XML / JSON / CSV и моделью, определяемыми на языке программирования в вопросе. Например, Java имеет JAX-RS API легко конвертировать между JavaBeans и XML или JSON. JavaScript имеет -obviously- встроенную поддержку JSON (думаю, что такое «JS» в формате JSON обозначает).

Для того, чтобы учиться и играть с основной концепцией, руководителем к этому ответу: Как использовать сервлеты и Ajax?

Чтобы узнать о преимуществах JAX-RS над сервлетом, голова к этому ответу: Servlet против RESTful

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Введение в Ajax

В этой статье AJAX описывается на уровне возможностей и примеров. Рассмотрены особенности асинхронного взаимодействия и примеры использования, но с минимумом технических деталей.

Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

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

Вот код кнопки в примере выше:

При нажатии она вызывает функцию vote , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div ‘е под кнопкой:

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект XmlHttpRequest , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote :

Поток выполнения, использованный vote, довольно типичен и выглядит так:

  1. Функция создает объект XmlHttpRequest
  2. назначает обработчик ответа сервера onreadystatechange
  3. открывает соединение open
  4. отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange )
  5. показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange .

Смысл AJAX — в интеграции технологий

Технология AJAX использует комбинацию:

  • (X)HTML, CSS для подачи и стилизации информации
  • DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
  • XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт .
  • JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Что я могу сделать с помощью AJAX ?

Смысл AJAX — в интерактивности и быстром времени отклика.

Небольшие элементы управления

В первую очередь AJAX полезен для небольших элементов, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.


Динамическая подгрузка данных с сервера.

Например, дерево, узлы которого подгружаются по мере раскрытия.

Незаметные для пользователя действия.

Например, при редактировании статьи — каждые 10 минут результаты автосохраняются на сервере.

Непрерывная подзагрузка информации с сервера.

Самый типичный пример — чат. В окошко постоянно поступают все новые сообщения, непрерывно подгружаемые с сервера. И, опять же, через AJAX, без перезагрузки страницы, пользователь может
отсылать сообщения на сервер.

Существуют другие предложения подобного рода, например, отображающие биржевые котировки в реальном времени.

Пример. Google suggest.

Google — одна из первых систем, которая предложила «живой поиск», live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

Код, который это обеспечивает, работает следующим образом.

  • Активируется примерно при каждом нажатии клавиши
    • Время посылки последнего запроса отслеживается
    • Для «обычной» скорости печати — запрос отсылается при каждом нажатии
    • Для «программистской» скорости — каждые несколько нажатий
  • Создается скрытый DIV, который показывается при начале печати
  • DIV заполняется ответом сервера
    • Текущий результат подсвечен, можно перемещаться и выбирать
    • При нажатии правой стрелки, поиск в подрезультатах
  • Результаты кэшируются
    • при нажатии на «удалить», обращения к серверу не происходит
  • Время на осуществление запроса отслеживается для управления частотой запросов к серверу
    • Обычный модем будет обращаться к серверу меньше,
    • Подключение по выделенной линии — запросы идут чаще.

Пример. Gmail.

Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.

На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для следующих фич.

    Проверка ошибок ввода формы ДО сабмита

Результат: обширная популярность, высокий спрос на account’ы с момента открытия.

Синхронная модель VS Асинхронная модель

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

Условно говоря, мы действуем так:

  1. закидываем удочку
  2. ждем, когда клюнет
  3. клюнуло — включаем подтяжку спиннинга

При асинхронном подходе мы:

  1. вешаем на удило специальный детектор клева, задаем ему тянуть спиннинг, когда клюнет
  2. закидываем удочку
  3. занимаемся другими делами
  4. детектор клева срабатывает, запуская подтяжку спиннинга

Т.е, в синхронном случае удочка постоянно приковывает наше внимание. Ловля рыбы — последовательный процесс.

В асинхронном варианте — мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.

Асинхронное программирование сложнее, чем синхронное, и поначалу непривычно, т.к в нем заранее задается то, что сработает после.
Т.е, программу «что делать, когда клюнет» нужно задать до того, как клюнуло, и вообще неизвестно, есть ли в водоеме рыба.

Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом — в отдельной статье.

Синхронная и асинхронная модель в AJAX

Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.

В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока тот совершит всю необходимую работу. Сервер выполняет запросы к базе данных, заворачивает ответ в необходимый формат и выводит его. Браузер. получив ответ, вызывает функцию показа.

Все процессы выполняются последовательно, один за другим.

Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом.

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

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

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

Пользователь может написать комментарии, заполнить и отослать форму и т.п: Могут производиться новые асинхронные запросы.

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

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

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

Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.

Особенности асинхронной модели

  • Сложность в реализации
    • Недостаточные возможности браузера (javascript)
    • Асинхронная модель сложнее для отладки
  • Race conditions
    • Неопределена последовательность выполнения
    • Можно делать много одновременных задач («удочек»), но задача, начатая первой, может окончиться последней.
  • Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
    • Ошибок коммуникации — разрыв связи, и т.п.
    • Пользовательских ошибок — например, не хватило привилегий
  • Контроль целостности (bugproof)
    • Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.
  • Интерактивность
  • Быстрый интерфейс

Плюсов всего два, зато какие! Овчинка стоит выделки.

Асинхронный drag’n’drop.

Иногда для асинхронных операций необходимо делать различные «финты ушами». Например, хочется сделать drag’n’drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.

Drag’n’drop — это «взял мышей объект — положил куда надо — готово». Но в асинхронной модели не может быть все прям сразу «готово».
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.

Надо как-то показать, что процесс пошел, но результат «ща будет..». А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.

В таком случае применяют либо синхронные запросы к серверу — и тогда все действительно подвисает, либо оригинальный выход — положить объект, как будто он перенесен, и проинформировать анимированной иконкой об ожидании ответа.
Если ответ отрицателен — обработчик ответа переносит объект обратно.

Stale context, устаревший контекст

В примере с drag’n’drop также затронута проблема «stale context» — устаревшего контекста.

Веб — многопользовательская среда. Если для навигации используется,
скажем, дерево статей, то над ним работают много человек. Один из них может удалить ветку дерева, над которой работает другой: конфликт.

Как правило, для преодоления таких казусов используются следующие средства:

Политика редактирования

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

Локинг и/или версионный контроль

Локинг — блокирование редактируемых документов.

Версионный контроль — каждый новый документ становится версией, так что изменения никогда не теряются. Версионность влечет за собой конфликты, когда Петя начал редактировать документ раньше Васи, а сохранил — позже. При этом в последней версии изменения Васи оказались потеряны, хотя предпоследняя (Васина) версия в системе обязательно есть.

Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion.


Автообновление контекста

Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.

Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу.

Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс — новые письма.

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

Всё это уже знал, но статья так легко и интересно написана что прочел еще раз =) 5+

Все это конечно интересно, но где взять конкретные примеры допустим ajax авторизации?

Ну смотри возмём выше указанный пример запрос ajax через эту функцию отправляеш данные в post запрос в .php файл а там уже средставами php делаеш необходимые вычисление,проверку,добавление в базу и т.д а потом возвращаеш результат ,ajax его возвращает

Я знаю для чего нужен Ajax! Вот только не знаю с чего начать его изучение!

А что Вы хотите научиться делать? Поконкретнее, если можно.

Интересует очевидное — считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title=’не знаю ответа’ . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера — выводить его в , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ 😀

в примере, который указан выше есть все ответы.
запрос отсылается на «/ajax_intro/vote.html»
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML

или Вы не об этом?

1. Содержимое файла «/ajax_intro/vote.html» ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.

1. По этому адресу находится серверный скрипт, который засчитывает голос и выдает текст ответа. Текст ответа можно получить в responseText.

2. Да, на клик подвешена функция vote. При клике она вызывается, передает голос на сервер и возвращает ответ.

3. Формы никакой нет, и самбита нет. Есть вызов сервера через XmlHttpRequest.

По поводу источника — вы читаете оригинал статьи.

Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение «Ожидается ответ сервера»?

PS. Не спорю, что в Вашем варианте оно работает «без гвоздей». А у меня движок, в котором кое-как сваяли модуль поддержки Ajax.

Не заметил сразу прямую выдачу в div через innerHТМL — прошу прощения

Спасибо, все фукционирует

А например кнопку подгружаемую по условию можно сделать ?

// создать объект для запроса к серверу, функция getXmlHttp будет дана ниже
напишите пожалуйста getXmlHttp. а может я просто неувидел?
заранее спасибо

«Вешаем на удило специальный детектор клева»
Я плачу Браво )))

все прекрасно понятно =)
только вот чего начать изучение?
допустим php . поставь apache+mysql+php = изучай а тут не пойму с чего начинать =( что ставить?

Я так подозреваю, что для самого конкретно AJAX`a вообще ничего ставить не нужно. Просто нужен какой-нить блокнот с подсветкой синтаксиса. Ну а для серверной части подойдёт Denwer, но это как вы уже сказали (apache+mysql+php).

оч клево написано

Класс, изучаю вот. Только если нажать на голосовать второй раз (подождав от первого прилично), то ответ придет от сервера настолько быстро, что в итоге у вас залипает фраза «Ожидаю ответа сервера. «. Это можно решить как-то?

Единственный вариант, который приходит в голову — send(null) вернуло закешированный ответ, который тут же обработался — и все это до 2й строки.. Но это очень странно, получается что запрос обработался фактически синхронно.

Классно всё расписано . а где взять пример аякса для генерации дерева ?

Примеры дерева — в программе Visual DataFlex 16.1 — после установки и загрузки библиотеки AJAX Library 2.3 — есть примеры в директории Examples

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

Классно написано, автору респект!

Хорошая статья мне понравилось и про ajax теперь все ясно стало

Зе бест!
Суть аякса я понял.
теперь думается — нужно разобраться с синтаксисом языка и попробовать сделать замену фрэймов.

Вопрос-уточнение! я нуб! Если я хочу скачать контент с конкретного сайта, используя свою html-форму (то есть ту, которая на моем компе), а не форму этого сайта, то это подпадает под кросс-доменный скриптинг? или это можно закрыть типовым XmlHttpRequest.

Спасибо за статью!
Отлично разжеванный материал, наконец-то мне стало все ясно с этим аяксом

Очень хорошая статья, но у меня возник вопрос, если надо передать не null запрос а например ассоциотивный массив
ну как blablabla.ru/test.php?key1=var1&key2=var2

как тогда строить req.send
?

В данном случае просто делаешь URL: /test.php?key1=var1&key2=var2

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP.

А не могли бы написать для примера с голосованием скрипт PHP? Я поняла, что отправка идет методом GET, а вот как это «ловить» на сервере…
Спасибо

Направлять запрос соответствующему скрипту и в нем все делать. Скажем, /ajax/vote.php

То есть используем метод POST или Get указывая скрипт обработки на сервере там он как то преобразовует данные с ajax в php и тут php связываеться с бд. Так получаеться?

Убейся, что ты здесь вообще делаешь??

Чудесная статья . Все понял, кроме одного момента: что на ходится в файле vote.php? Там функция вызывается или что? И как аякс понимает что сервер что то вернул? return или что то другое? Хотелось бы поподробнее.

Присоединяюсь к предыдущему вопросу

Добавил в статью информацию, содержащую ответ на ваш вопрос.

У автора статьи есть чувство юмора)

Спасибо за статью. Все бы так писали. Надо ещё разок почитать. хочется влезть в детали.

А как решать проблему с кодировками? Мне требуется посылать ответ написанный кирилицей. В этом случае браузеры отображают билеберду.

Возможно есть более продвинутые способы, но я в php-скрипте, который возвращал мне ответ, все русские буквы прогонял через функцию iconv и менял кодировку

XmlHttpRequest всегда приходит в UTF. Тут уж ничего не поделаешь — либо переходить на UTF-8, либо перегонять iconv .

В php.ini
default_character_set=cp1251
подобная строчка должна быть где-то в файле.

Все преимущества использования AJAX на лицо. Очень хорошо статья написана.

день добрый, а как можно реализовать прогрузку контента с помощью ajax, если:
Станичка использует фрэймвок mootools.
На ней разные эффекты, соответственно.
Есть, допустим, место —

А туда нужно ajax’oм подгрузить не просто текст, а несколько «виджетов» mootools, которые после подгрузки связались бы с фрэймвоком и стали бы работать.

Передай вместо тек4ста ссылки на виджеты с параметрами

Давно искал пример проверки логина при регистрации без перезагрузки страницы. Нигде не мог найти внятного обьяснения или рабочего примера. Сделал по типу описаного тут голосования, всё заработало. Короч, наманая статья

В чем суть Ajax? Вижу только конструкции явыскрипт и пиашпи!

Отличная статья! Спасибо автору

ajax все больше укрепляет свои позиции в реализации интерактивности сайта
Статья 5+

Скопировал ваш код с кнопкой «Голосовать», на страничку, которая у меня на винчестере. Запустил — надпись «ОК» в теге появилась, но никакой alert не появляется. Стал изучать, оказывается req.status равно нулю. Почему? Что не так?

Я изменил строчку адреса на такую:

Или что я не правильно делаю?

$en ? echo ‘privet’ : echo ‘paka’;

У меня вопрос. как изменить кодировку сообщения, приходящего с сервера.
Все вроде бы нормально, но ответ, который потом выдается Alert-ом содержит в себе «Сервер ответил: (тут куча непонятных иероглифов)»

p.s. все файлы сохранены в кодировке Windows-1251

Извиняюсь, так не получится.

Хотя, если посылать заголовок скриптом, то прекрасно работает

всё крута) пасиба) счаЗ буду делать вход на сайт через
Ajax
)
можно сделать кнопку Просмотр в диве через Ajax)

Sniper
внимательно вчитываемся ‘частые проблемы > кеширование’ на xmlhttprequest.ru
там описан еще один вариант обхода кеша, немного больше кода зато больше эффективности

там же, чуть ниже, можно посмотреть разбор кода

а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера. и тишина.

отвте как увидел позже есть))

Используйте запросы POST, потому что браузер их не кеширует и они более защищены!

Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax — это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ — для профессионалов рыбной ловли 🙂

почему не вылетает alert .


Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??

Вы пишете «Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу»

Можно поподробнее, что значит «держит постоянное соединение»? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax — это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?

Не понял юмора насчет проблем со «старым контентом». Технологии распределенных баз данных насчитывают уже десятки лет. Неужели пользователи аяхи избавлены от этого накопленного опыта и знаний?

Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.

Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?

До сих пор пробовал — он его читает, но упорно пытается вернуть в utf8. Соотв., вместо русских букв получается абракадабра.

Как решить проблему с использованием серверных компонент (на сервере крутится ASP) — примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).

Буду ОЧЕНЬ признателен, если кто подскажет!

Спасибо большое. Перелистав почти десяток «учебников» только на этой статье наконец «въехал» в технологию.

Ам.. не понятно откуда берутся вот эти цифры?

if (req.readyState == 4)
.
if(req.status == 200)

пардон, вопрос снят )) У кого будут такие же глупые вопросы, смотреть http://xmlhttprequest.ru/

Я тоже не понял как отправлять данные методом POST. Точнее понятно, но какой индекс тогда будет у массива $_POST с тем что я отправил? если бы я отправлял кнопкой submit через форму, в которой поле ввода, например с аттрибутом name=»test», то в скрипте бы я обратился $_POST[«test»]. А с XMLHttpRequest так не работает. ЗЫ только что со страницы http://xmlhttprequest.ru/, там тоже ничего не сказано

Я тоже был на http://xmlhttprequest.ru/
читаем внимательнее:

send()
Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется send(null), а для POST-запросов тело содержит параметры запроса.

// Пример с POST
.
var params = ‘name=’ + encodeURIComponent(name) + ‘&surname=’ + encodeURIComponent(surname)
xmlhttp.open(«POST», ‘script.php’, true)
.
xmlhttp.send(params)

Вопрос только в том остался, что когда я в script.php
выполняю
echo $_POST[«name»]
выводится пустая строка .

установи http-заголовок вот так вот: req.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

Есть вопрос, ajax-технология базируется на языке Java Script, что будет если пользователь отключит у себя в браузере Java Script? Я так понимаю ajax-отвалится и весь труд накроется медным тазом( а чтобы такого не случилось надо писать запасной код который сработает в любом случае ). Я правильно понимаю?

С одной стороны Да, все отвалится, но сдругой стороны как ты напишиь запасной код. Проще тебе вывести сообщение пользователю о том, что у него не контачит javascript.

у меня вот тоже такая же проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом.
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp .

Не подскажите,как мне при помощи ajax сделать, чтобы при нажатии ссылки в меню слева(меню новостей например), новость отображалась в главной таблице

Отличная статья! Спасибо!

Автор, большое спасибо за чудесную статью! Всё очень толково разьяснено. Респект

> Пример. Google suggest.
DIV заполняется ответом сервера

  • Текущий результат подсвечен, можно перемещаться и выбирать
  • При нажатии правой стрелки, поиск в подрезультатах

Как перехватывать нажатия клавиш? В строке поиска Яндекса так же можно перемещаться по выданным возможным вариантам с помощью клавиш курсора. Но я никак не могу разобраться как это реализовано? Подскажите в каком направлении копать.

Вот у меня такой вопос.

Я все сделал, работает супер! но есть одна фигня. Текст с сервера не выводиться. в вместо него одно слово: undefined.

В сервере содержиться:

Не подскажет, где я ошибся?

Ошибся почти в каждом предложении:

«не выводиться»;
«содержиться».

Может сначала в школу, а потом текст с сервера выводить?

помоему респонс текст должен идти со стартом, а не с инком

Отличная статья!
«Смысл AJAX — в интерактивности и быстром времени отклика.»
Подскажите пожалуйста, насколько быстро работает AJAX? Можно ли с помощью данной технологии создать динамичную онлайн-игру?

Думаю скомпилированные приложения все равно будут работать быстрее (Flash)

Не работает(((
Скопировал даже код предпредыдущего сообщения, на что IE выдал:
Сведения об ошибке на веб-странице
Сообщение: ‘null’ — есть null или не является объектом
Строка: 35
Символ: 5
Код: 0

Вот тебе по легче,тоже создаём XMLHttpRequest

А вообще статья чёткая,понравилась 5+

Ramzil_Nixon, я статью еще не доконца прочел, пока разбираюсь. Мне показалось что правильней назначать обработчик перед отправкой запроса:

у Вас:

start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;
start.onreadystatechange = function() .

Мне кажется, лучше так:
start.onreadystatechange = function() .
start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;

Подскажите пожалуйста, не работает в ИЕ8 (у меня такая стоит в других не проверял). В остальных браузерах все нормально.

срабатывает изменение в БД но нет анимации. В шаблоне прописал стили которые проверяют значение в БД и соответственно при нажатии F5 если элемент заблокирован то он остается в полупрозрачном виде. Так вот в ИЕ при нажатии кнопки + потом F5 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо

Илья, сделайте, пожалуйста, учебник по AJAX более подробным, так сказать «для начинающих». После прочтения учебника по JS этот материал кажется слишком сжатым и «не измельченным», непонятным. Стоит добавить больше примеров, расписать более подробно. Например, в каких случаях нужно использовать GET, а в каких POST? Какой вариант транспорта выбрать, если у меня на странице есть форма для выставления рейтинга, а на другой — большая HTML-форма из 50 разных элементов (поля, списки, флажки. ) для загрузки на сервер? Как взаимодействовать с БД, например, с mySQL + php ? На этой странице хотелось бы увидеть пример не с примитивным

а с ветвлением на стороне сервера, например, та же голосовалка: выбираешь «5», сервер возвращает «Вы выбрали 5» и т.д.

Здравствуйте, а как ajax применять в ASP.NET, не MVC? Что служит обработчиком, вместо страница.php?

Доброго времени суток, Илья. Хочу обратиться к Вам за разъяснениями по поводу XMLHttpRequest, т.к. в интернете не нашел ответ на свой опрос (может и не правильно искал).
Суть вопроса такова, примерно:
есть функция, которая возвращает объект xhr (кроссбраузерно). При этом я написал ее таким образом, что если уже есть готовый объект она возвращает его. Но тут возникли проблемы — если первый запрос еще не отработал и создавать второй, то первый абортится (Aborted), печально ((
Решил переделать ф-кцию, чтоб возвращала всегда новый объект XMLHttpRequest, но тут возник вопрос, а не будет ли утекать память. Что происходит с объектом XMLHttpRequest после того как он отработал.
Может, после обработки результата от запроса объект XMLHttpRequest нужно явно удалять при помощи delete?
Буду очень признателен вам за помощь в данном вопросе.

Решил протестировать один пример в денвере с сайта
w3schools.com

И тут такая ситуация: меняю содержимое файла ajax_info.txt
но через браузер раз за разом выдаётся прежнее содержимое. Так и должно быть, и нормально ли, что оно кэшируется? Спасибо заранее.

Ответ нашёл у вас же. Спасибо

Почему когда я делаю вот так

То есть ставлю в событие условие обработки первого состояние запроса, Internet Explorer и FireFox запускают эту функцию два раза.
Помогите мне. Я уже целый день вожусь с этим.

, а я то думаю, что он не сразу реагирует.

Круто, эта функция (XmlHttp) работает даже в телефонах, проверялось на Samsung, Nokia и Apple iPhone 4.
А я сначала думал что ajax только для компов.

Случайно наткнулся на статью. Очень доступно написано! Спасибо автору.

начал изучать AJAX, разбирался с данным кодом. все понял. но код у меня не работает.
метод sleep из рнр запускается. но сообщение из echo не выводится. уже сто раз все пересмотрел и не понимаю в чем проблема.

Спасибо, начал работать с javascript, понадобился ajax , хороший пример.

alert(«Ответ сервера: «+req.responseText);
req.responseText — пустая строка, хоть убей!

if (req.readyState == 4) <
alert(«Ответ сервера: «+req.responseText);
>

if(req.status == 200) <
// если статус 200 (ОК) — выдать ответ пользователю
alert(«Ответ сервера: «+req.responseText);
>
Выводит: «Ответ сервера:»
req.responseText — пусто.
req.status == 4 — мимо проходит

P.S. Как то у вас всё сложно.

Для того чтобы сделать запрос тянешь jquery? Молодец.

Для того чтобы сделать запрос тянешь jquery? Молодец. ответ

хороший текст. спасибо!

Alex’S, возможно в php файле возвращаешь через return, а нужно echo.

Пример: vote.php для примера с голосованием
// span рядом с кнопкой

Асинхронность — это, конечно, хорошо, но иногда нужно без нее. Ну, например, по результатам одного запроса нужно сделать следующий, а по результатам того — еще один. Матрешку из обработчиков городить? Существует какой-либо способ вернуться из callback, кроме очевидного и глупого — гонять в основной программе цикл, ожидая установки флага.

Хорошая должность. Спасибо, что поделился.

Скажите пожалуйста, почему не работает постраничная навигация после ajax запроса

Спасибо за статью. С Ajax имею мало опыта, и Ваша помощь оказалась весьма актуальной.

Еще можно почитать о разработке интересные статьи на eqsash.

Искал эту информацию. Замечательная информация Я проверю для получения дополнительной информации. mobile legend bang bang game

Хорошая должность. Спасибо, что поделился. Домашнее

alert(«Ответ сервера: «+req.responseText);
req.responseText — пустая строка, хоть убей!
ado stunt cars 2

Отправить комментарий

Текущий раздел
  • Введение в Ajax
  • Ajax и Rich Client
  • Ajax и клиент-серверная архитектура.
  • Способы общения с сервером
  • COMET
  • Форматы данных для AJAX
  • Обмен данными для документов с разных доменов
  • Обмен данными между доменами. Часть 2.
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Последние комментарии
  • Комментарий
    18 часов 22 минуты назад
  • A very nice blog, I like the way you.
    2 дня 4 часа назад
  • This is a great thing, I think everyone.
    2 дня 4 часа назад
  • It is wonderful to be here with.
    2 дня 4 часа назад
  • Download and play DOM Level 0 — это.
    2 дня 9 часов назад
  • We are the children
    3 дня 9 часов назад
  • function firstUniqLiter(str) <
    3 дня 17 часов назад
  • Великие посты! Я на самом деле.
    4 дня 11 часов назад
  • artical is really informative and.
    5 дней 1 час назад
  • Вы не можете найти себя, уходя в.
    6 дней 6 часов назад
Последние темы на форуме

Заголовок первого блока

  • Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1
  • Пункт #2
  • Пункт #3
  • Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4
  • Пункт #5
  • Пункт #6
  • Пункт #7
    • Пункт #7.1
    • Пункт #7.2
    • Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3
    • Пункт #7.4
    • Пункт #7.5
  • Пункт #8
    • Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1
    • Пункт #8.2
    • Пункт #8.3
  • Пункт #9
  • Пункт #10
  • Пункт #11 Пункт #11 Пункт #11 Пункт #11 Пункт #11
    • Пункт #11.1
    • Пункт #11.2
    • Пункт #11.3
    • Пункт #11.4
    • Пункт #11.5
    • Пункт #11.6
  • Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12
  • Пункт #13
  • Пункт #14
  • Пункт #15
  • Пункт #16
  • Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14
  • Пункт #15
  • Пункт #16

Заголовок второго блока

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Изучаем Java

Обучающие курсы:

Основы ajax

В этом разделе учебника мы рассмотрим основы ajax – новой технологии, используемой сегодня повсеместно.

Изучаем обмен данными с помощью тега iframe

AJAX (Asynchronous Javascript And Xml, асинхронный JavaScript и XML) — это технология взаимодействия веб-браузера с сервером без перезагрузки страницы.

Веббраузер в фоновом режиме отправляет запрос серверу. На сервере скрипт обрабатывает переданный запрос и отправляет ответ в виде XML-документа, фрагмента HTML-документа, скрипта JavaScript, объекта JSON или просто текста. Полученный ответ обрабатывается в веббраузере с помощью языка JavaScript, и на основе ответа обновляется структура текущего HTML-документа. Таким образом не происходит перезагрузка всей веб-страницы, а только лишь изменяется какойлибо ее фрагмент. Классический пример технологии AJAX демонстрирует поисковая система Google, позволяющая при наборе поисковой фразы в строке запроса предлагать различные варианты, начинающиеся с набранных букв.

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

После заполнения формы и щелчка на кнопке Submit данные будут отправлены серверу, и ответ сервера полностью заменит текущую веб-страницу. Однако если в параметре target тега form указать название фрейма, данные формы будут загружены в этот фрейм, а текущая веб-страница останется без изменений. На этом и основан альтернативный способ обмена данными без перезагрузки веб-страницы.

Для создания фрейма используется тег iframe с нулевой высотой и шириной. Более того, обычно фрейм полностью скрывают от глаз пользователей, присваивая значение попе атрибуту display. Название этого фрейма указывается в параметре target тега form. После отправки формы скрипт на сервере должен вернуть фрагмент кода на языке JavaScript, который произведет изменения в текущей веб-странице.

Рассмотрим все на примере. Создадим документ с формой, который будет обмениваться данными с файлом ajах. php (листинг 10.2), расположенным на сервере.

Технология Клиент-Сервер 2007’4

Home Поиск Издания Контакты k-press.ru

Автор: Патрик Гэн
IBM

Опубликовано: 21.10.2008

С ростом популярности Ajax наступает необходимость развеять мифы относительно этой популярной технологии и разобраться со всеми проблемами, которые могут возникнуть во время ее использования.

Ajax – это довольно новое понятие (хотя некоторые говорят, что это старая технология в новом обличии), которое наделало много шума в различных сообществах Web-разработчиков, включая Java EE. Технология Ajax делает работу с приложениями более удобной, устраняя необходимость бесчисленных перечитываний Web-страниц. И, кроме того, Ajax сближает серверную и клиентскую части кода и предоставляет пользователю практически бесшовный интерфейс. Ajax позиционируется как один из главных инструментов, который поможет интернету подняться на новый уровень (Web 2.0).

Как прилежные Java EE-разработчики, вы, вероятно, читали множество статей с практическими рекомендациями по использованию Ajax, и, возможно, вас взволновала предоставляемая им возможность усовершенствования ваших работ. Но каким же все-таки образом модель асинхронной передачи данных впишется в ваши Java EE приложения?

Эта статья поможет найти ответ на этот вопрос, исследуя воздействие Ajax на дизайн, развитие, тестирование и работу Java EE-приложений. Моя цель состоит не в том, чтобы препятствовать использованию технологии Ajax или намекать, что проблемы, с которыми вы можете столкнуться, свойственны технологии Ajax, а, скорее, в том, чтобы помочь вам все спланировать и упростить, и сделать вашу работу с Ajax более эффективной и приятной.

Недостатки схемы адресации

Довольно долго Java-сообщество усердно применяет для Web-ориентированной разработки приложений паттерны проектирования. Одним из наиболее используемых является паттерн Модель-Представление-Контроллер (Model-View-Controller – MVC). Несколько фреймворков с открытым кодом, например, Apache Struts, основаны на этом паттерне и следующей из него архитектуре (см. Ресурсы). Достоинства MVC включают в себя разделение ответственности и уменьшение количества избыточного кода.

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

Например, разработчики модели сосредотачиваются на таких технологиях, как JDBC, компонентах Enterprise JavaBeans (EJB) или Java-классах, взаимодействующих с основными data-persistence технологиями.

Разработчики представлений сосредотачиваются на технологии JavaServer Pages (JSP), библиотеках тегов и других технологиях, связанных с представлением данных.

Уровень контроллера отделяет уровень модели от представления и, одновременно, является связующим звеном между ними, сохраняя четкое разделение ответственности. Рисунок 1 иллюстрирует архитектуру MVC:


Рисунок 1. Архитектура MVC.

Внедрение Ajax в Web-приложения Java EE имеет значение для разделения ответственности (а потому и при разделении ролей разработчиков). В некоторых случаях применение Ajax может породить пересылку большого количества JavaScript-кода обратно на JSP-страницу, отображаемую в браузере. Таблица 1 демонстрирует уровень представления MVC, не использующий Ajax, и показывает количество необходимого кода, в предположении, что уровень контроллера представлен сервлетами, а уровень представления – технологией JSP. (Я объясню различие между синхронными и асинхронными запросами в следующем разделе, Решение дилемм разработки).

Таблица 1. MVC без Ajax: Количество кода, связанного с типичной последовательностью уровня представления.


Последовательность Описание Требуется код?
Перед вызовом синхронного запроса Код скриптлета требуется при подготовке к отправке формы. Нет.
Вызов синхронного запроса Отправка формы инициализируется нажатием кнопки или ссылки; значения элемента DOM автоматически переводятся в HttpRequest (посредством GET или POST). Нет: все, что требуется – способ вызова отправки данных страницы.
Прием ответа на синхронный запрос После завершения обработки программой-сервером объект обычно отсылается обратно в JSP (через HttpRequest или сохраненным в HttpSession). На этом этапе объект доступен в JSP посредством использования HttpRequest или HttpSession (с помощью скриптлета или какой-либо библиотеки тегов), и требуются минимальные усилия по созданию скриптов для отображения содержимого объекта. Да: минимум скриптлетов.

Сравним Таблицу 1 с Таблицей 2, которая описывает уровень представления, использующий Ajax, так же предполагая, что уровень контроллера представлен сервлетами, а уровень представления – технологией JSP.

Таблица 2. MVC с Ajax: Количество кода, связанного с типичной последовательностью view-уровня.


Последовательность Описание Требуется код?
Перед вызовом асинхронного запроса Код JavaScript требуется для получения значений DOM элементов, необходимых для вызова Ajax. Да
Вызов асинхронного запроса Код JavaScript требуется для создания XMLHTTPRequest и ассоциирования (заранее собранных) значений DOM-элементов и XMLHTTPRequest.send(). Да
Прием ответа на асинхронный запрос После завершения исполнения серверного кода JavaScript-код требуется для получения результата (из XML-потока ответа) и преобразования значений в соответствующие DOM-элементы. Да

Как видите, количество скриптов в уровне представления при использовании Ajax увеличивается. Это влечет за собой три существенных недостатка:

  • JSP требует большего количества JavaScript-кода.
  • Дизайн нарушает разделение ответственности.
  • Дизайн повторно вводит монолитные JSP (Модель 1: море HTML-кода, CSS-кода, изображений и скриптов), антипаттерн, который чрезвычайно неудобен для понимания и обслуживания (см. Ресурсы).

У вас есть несколько способов избежать этих недостатков дизайна или, хотя бы, смягчить их:

  • Дизайн с повторным использованием : к сожалению, часто трудно избежать скриптов, характерных для поддержки Ajax. Планируйте и проектируйте код скриптов так, чтобы добиться его максимального повторного использования.
  • Используйте клиентскую часть MVC : вы можете включить использование клиентской части MVC, этот способ подробно описан в статье Ajax в действии Дэйва Крэйна и др. (см. Ресурсы). Такой подход позволяет применить разделение ответственности, но добавляет проблем, поэтому стоит использовать его осмотрительно.
  • Используйте Ajax-фреймворк : несколько Ajax-фреймворков, таких, как Direct Web Remoting (DWR) (см. Ресурсы), помогают внедрить шаблон Ajax в Java EE-приложение, используя минимальное количество кода.
  • Пересмотрите обоснованность проектирования : По существу, Ajax предоставляет Web-приложениям возможности настольных приложений. Если большая часть клиентских взаимодействий в данном Web-приложении поддерживает Ajax, то, возможно, стоит реализовать его в виде настольного приложения.

Решение дилемм разработки

При использовании Ajax в разработке сетевых Java-приложений важно полностью осознавать разницу между синхронной и асинхронной коммуникационными моделями (см. Ресурсы). Недостаточная поддержка асинхронной коммуникационной модели может негативно отразиться на разработке клиентской части, интеграции с Web-фреймворками, использовании библиотек тегов, использовании IDE и работе потоков.

В синхронной модели запроса/ответа, запрос всегда инициируется браузером (в противоположность Web-серверам, серверам приложений или Web-приложениям). В свою очередь, Web-сервер, сервер приложений или Web-приложение отвечает на входящие запросы. В течение процесса обработки синхронной пары запрос/ответ пользователь не может продолжить использование браузера.

Рисунок 2 является диаграммой последовательности, иллюстрирующей традиционную модель синхронной передачи данных. Обратите внимание на последовательности серверных операций – процесс отправки формы от клиента и обработка ее на сервере тесно связаны.

Рисунок 2. Последовательность синхронной передачи данных.

В модели асинхронной передачи данных взаимодействие между браузером (через Web-пользователя) и Web-сервером, сервером приложений или Web-приложением не связаны. Во время обработки пары запрос/ответ, пользователь может продолжать использовать браузер. Как только обработка запроса будет завершена, асинхронный ответ (от Web-сервера, сервера приложений или Web-приложения) будет передан обратно на страницу клиента. Обычно, в течение этого процесса, вызов не влияет на действия пользователей; им нет необходимости ждать ответа.

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

Влияние клиентской части

При внедрении Ajax в Web-приложение команда разработчиков должна учитывать ряд потенциальных проблем, в основном связанных с генерацией HTML-страницы, и ее взаимодействием с браузером. Эти проблемы хорошо описаны в статье Криса Лаффры (Chris Laffra) Рассматривая Ajax , состоящей из двух частей (см. Ресурсы). Необходимо отметить несколько важных вещей:

  • Возможно, не включена опция scripting : по разным причинам поддержка JavaScript может быть отключена в различных браузерах.
  • Поддержка различных браузеров повышает требования к коду : поддержка приложением многих браузеров и их версий может потребовать дополнительных усилий по написанию скриптов, так как способы интерпретации DOM-элементов браузерами существенно различаются (а потому для операций с этими элементами нужен разный JavaScript-код).
  • JavaScript небезопасен : в большинстве браузеров JavaScript-код страницы можно просмотреть, просто выбрав опцию view source. Используя Ajax, убедитесь, что логика вашего кода является открытой.

Рисунок 3. Последовательность асинхронной передачи данных.

Рисунок 4. Последовательность управления синхронным запросом.

Интеграция с сетевыми структурами

Вполне естественны попытки интегрировать Ajax-разработку с выбранным Web-фреймворком Java EE. Но пока еще не все Java EE Web-фреймворки предоставляют поддержку асинхронной модели передачи данных. Чтобы понять последствия этого факта, вам нужно понять, каким образом сервлеты организуют синхронную и асинхронную передачу данных. Рисунок 4 показывает традиционную последовательность управления синхронным запросом.

Java EE Web-разработчикам рисунок 4 должен показаться довольно знакомым. Сначала запрос от браузера управляется контроллером service(). Этот сервлет получает любое необходимое значение из HttpRequest (параметр или атрибут). Как только контроллер завершает обработку, её результат отсылается обратно в HttpRequest (или HttpSession), и RequestDispatcher передает управление обратно на страницу.

Рисунок 5 показывает последовательность обработки асинхронного запроса.

Рисунок 5. Последовательность обработки асинхронного запроса.

Последовательность на рисунке 5 немного отличается от синхронной. Сначала запрос от браузера обрабатывается сервлетом контроллера service(). Этот сервлет получает любое значение, которое ему нужно, из HttpRequest (параметр или атрибут). Но когда контроллерная обработка завершена, должно быть указано, что тип контента HttpServletResponse – XML. Также, результат обработки должен быть выведен с помощью PrintWriter. Здесь использование RequestDispatcher игнорируется.

Дело в том, что как раз эта (асинхронная) последовательность не поддерживается в большинстве Java EE Web-фреймворков, что усложняет интеграцию с Ajax. Портлеты и фреймворки JavaServer Faces (JSF), которые не поддерживают асинхронную модель передачи данных, сталкиваются с той же проблемой.

Есть несколько вариантов выхода из этой ситуации:

  • Пользуйтесь существующими Web-фреймворками : вместо того, чтобы ждать, когда в любимом фреймворке появится поддержка Ajax, можно создать отдельный сервлет для обработки асинхронных запросов. DWR использует как раз такой подход. Недостаток такого подхода состоит в том, что возможности вашего фреймворка в Ajax-запросах использовать не выйдет.
  • Совершенствуйте Web-фреймворк : используя расширения, которые имеются в свободном доступе, вы можете придумать способ совершенствования Web-фреймворка.
  • Переходите на фреймворки, поддерживающие Ajax : новейшие фреймворки начинают поддерживать асинхронную модель. Один из них – Apache Shale (см. Ресурсы).

Использование библиотек тегов

Использование библиотек тегов при разработке Web-приложений очень распространено. Как и многие Web-фреймворки Java EE, некоторые библиотеки тегов в настоящее время не поддерживают асинхронную модель, не оставляя вам возможности перевести данные, отправленные через XMLHttpRequest, в HttpServletRequest (и наоборот). По сути, библиотеки, которые не поддерживают асинхронную передачу данных, становятся бесполезными на время вызова Ajax XMLHttpRequest. Варианты такие:

  • Не используйте библиотеки тегов, которые не поддерживают асинхронную модель : перейдите с кода, который сейчас вы генерируете при помощи библиотек тегов, на код HTML/JavaScript. (Если Web-приложение сильно зависит от библиотек тегов, этот способ, в конечном счете, приведет к увеличению размеров view-уровня.)
  • Обойдите эту проблему : используйте Ajax-фреймворки, которые позволяют обойти эту проблему. Один из примеров – DWR (см. ExecutionContext.forwardToString()). В этом случае вы можете продолжать применять библиотеки тегов, которые вы использовали.
  • Используйте библиотеки тегов, поддерживающие Ajax : используйте библиотеки тегов, которые поддерживают асинхронную модель, например, Ajax JSP Tag Library (AjaxTags) (см. Ресурсы).

Разработка и отладка с IDE

Для отладки JavaScript придумано множество инструментов, помогающих разработчикам в создании JavaScript-решений. Однако традиционные среды разработки Java не позволяют исследовать значения в XMLHTTPRequest и других параметрах Ajax.

Одно из решений – использование AJAX Toolkit Framework (ATF) (см. Ресурсы ). ATF – это дополнение к Eclipse с усовершенствованными инструментами редактирования JavaScript, такими, как проверка синтаксиса во время редактирования, встроенный браузер Mozilla, встроенный браузер DOM и встроенный JavaScript-отладчик. Кроме того, ATF включает в себя функцию Personality Builder, которая помогает при создании элементов IDE для произвольных run-time сред Ajax.

Проблемы работы потоков

В типичных синхронных Web-приложениях есть места, которые отнимают довольно продолжительное время на обработку нажатия кнопки или ссылки. Нетерпеливые и неопытные пользователи зачастую вызывают множество процессов отправки формы, нажимая на кнопку или ссылку более одного раза, ожидая, что это поможет ускорить процесс. Или пользователь может думать, что нужно двойное нажатие (как в настольных приложениях). Множественное дублирование процесса отправки формы в некоторых случаях безвредно. В других же, побочные эффекты могут вызвать серьезные проблемы с организацией поточной работы или эффект гонки (когда многочисленные процессы «соревнуются» за выполнение части кода). Например, неоднократные нажатия на кнопку передачи средств в банковском приложении могут послужить причиной непреднамеренных повторных транзакций.

Если Web-приложение поддерживает как синхронные, так и асинхронные модели взаимодействия, могут возникнуть проблемы в случае, когда его работа неправильно проанализирована и спланирована. В приложении, которое поддерживает обе модели передачи данных, может возникнуть путаница с вызовами на данной странице (то есть, исключительно синхронные, исключительно асинхронные и смесь синхронных и асинхронных). Как и в сценарии «многократного щелчка», асинхронный вызов может обрабатываться немного медленнее. И пользователь, если приложение не предотвращает этого, может вызвать синхронный запрос во время обработки асинхронного потока, поскольку страница не обновляется и поэтому не предотвращает дальнейшую активность на странице. Конечный результат – то, что эти два процесса обработаны одновременно. Даже если они не вызваны нажатием одной и той же кнопки или ссылки, такие ситуации могут вызывать проблемы поточной работы (подобно проблеме «многократного щелчка») в коде программы сервера.

В качестве примера возьмем страницу перевода средств в банковском приложении, показанную на Рисунке 6:

Рисунок 6. Транзакционный пример.

В этом примере кнопка Transfer Funds (Перевод средств) порождает Ajax-запрос. Ссылка Logout порождает синхронный запрос. Если нетерпеливый или неопытный пользователь нажмет последовательно кнопку и ссылку «Logout» (предполагается, что обе ссылки имеют одинаковый путь в коде), в конечном счете, может произойти эффект гонки.

Есть два способа избежать этой ситуации. Первый – это клиентское решение. Используйте JavaScript для того, чтобы, как только ссылка или кнопка была нажата, запретить дальнейшие попытки отправки формы до тех пор, пока текущий поток не будет обработан. Второе решение состоит в том, чтобы разрешить многократные отправки потоков, полагаясь на синхронизацию с серверной частью, чтобы избежать эффекта гонки. Если для решения этой проблемы вы выбрали синхронизацию, не забудьте, что Web-компоненты Java EE (сервлеты, портлеты, JSF и т.д.) являются многопоточными. Будьте осторожны с синхронизацией больших кусков кода (особенно кода, относящегося к циклу обработки запроса/ответа). Неправильное использование синхронизации может превратить приложение в однопоточное, уменьшая его производительность.

Преодоление проблем производительности

Использование Ajax может влиять на выполнение Web-приложений, основанных на Java EE. Возможность добавления дополнительных потоков по запросу может повлиять на два элемента.

Во-первых, возможно воздействие на пул потоков сервлет-контейнера. Это средство определяет максимально возможное число потоков, которые могут быть запущены в Web-контейнере одновременно. Для каждого запроса клиента нужен один поток. Однако запрос клиента не обязательно равен запросу пользователя. Браузеру может потребоваться несколько клиентских запросов на один пользовательский. Например, несколько клиентских запросов могут быть необходимы, чтобы осуществить операцию пользователя «отправить форму» (submit) (которая содержит в себе отправку значения полей формы, получение gif-файлов, получение файлов JavaScript, и получение файлов CSS). Если разрешено параллельно отправлять синхронные и асинхронные запросы, то такая ситуация означает использование еще одного потока (для Ajax-запроса) на каждый запрос пользователя. Хотя возможная необходимость добавления еще одного потока на каждый пользовательский запроса не кажется страшной, последствия этого становятся очевидными во время процесса загрузки приложения (когда каждый дополнительный поток на пользовательский запрос умножается на среднее число пользователей). Очевидно, что эта ситуация может влиять на выполнение сервлет-контейнера.

Еще одно узкое место – пул соединений с БД . Типичное Web-приложение Java EE разрешает два типа последовательности пользовательского запроса: поверхностные запросы и глубокие запросы. Поверхностный запрос – это запрос, который создается из Web-страницы и исполняется на сервере, но не требует доступа к постоянному хранилищу данных (такому как база данных) для выполнения запроса. Глубокий запрос – наоборот.

В последовательности выполнения глубокого запроса (предполагая, что необходимо соединение с базой данных), возможность добавления дополнительных потоков может повлиять на следующие параметры пулов соединений с базой данных:

  • Среднее число потоков, ожидающих соединения.
  • Среднее время ожидания для соединения в миллисекундах.
  • Среднее время соединения.

В результате, вам может понадобиться увеличить размер пула или число соединений.

Тестирование

Java-разработчики всегда акцентировали внимание на необходимости предоставления инструментов для тестирования Java SE и Java EE кода. Так как количество JavaScript в браузерах возрастает с внедрением Ajax, то требуется надежная база для тестирования. Сейчас доступны JsUnit, Selenium, и HttpUnit (см. Ресурсы).

Эти ресурсы предоставляют инструменты для разработки тестов тех функций JavaScript, которые управляют DOM-элементами на Web-страницах. Также они позволяют группировать единичные тесты в наборы. Средство тестирования совместимости в браузере Selenium позволяет вам тестировать функции JavaScript на различных браузерах и операционных системах. Здесь используются JavaScript и Iframes для встраивания механизма тестирования в ваш браузер. Эта техника должна работать во всех браузерах, которые поддерживают JavaScript и является особенно полезной для приложений, которые поддерживают множество различных браузеров и их версий. Как Selenium, так и JsUnit поддерживают непрерывную интеграцию : вы можете встраивать как единичные тесты, так и наборы тестов JavaScript в автоматизированный процесс сборки.

Вывод

Внедрение Ajax, как и любой другой технологии, в приложение Java EE имеет свои недостатки и преимущества. Эта статья дает вам общее представление об интеграции Ajax в Web-приложения Java EE. Модель асинхронного передачи данных в Ajax достаточно сильно отличается от синхронной модели, которая традиционно используется в построении Web-приложений на Java EE. Чтобы избежать неожиданностей, заранее продумывайте потенциальные проблемы, прежде чем использовать Ajax.

Поддержка Ajax во фреймворках и утилитах Java EE продолжает совершенствоваться. Чтобы уменьшить сложность внедрения Ajax, обратите внимание на новейшие системы, поддерживающие его. За чем стоит следить, так это за основанной на JSF Apache Shale и DWR, базирующейся на сервлетах.

Ресурсы


  • Оригинал статьи Ease the integration of Ajax and Java EE – http://www.ibm.com/developerworks/web/library/j-ajaxee/index.html?S_TACT=105AGX99&S_CMP=CP.
  • Сетевой дизайн систем приложений (Web-tier application framework design): краткий справочник по шаблону Модель-Представление-Контроллер с сайта Sun Blueprints (включая объяснение антимодели Модель 1) – http://java.sun.com/blueprints/gu > Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.

Copyright © 1994-2020 ООО «К-Пресс»

Интеграция JSP и jQuery

Несмотря на то, что на сайте рассматриваются различные технологии, библиотеки и фреймворки, связанные с Java SE/EE, в отдельных случаях нельзя обойтись без JavaScript. Особенно когда возникают вопросы, связанные с частичной перезагрузкой определенной информации на странице или размещением на странице интерактивной диаграммы с анимационными эффектами Chart.js. К примеру, если необходимо обновить на странице параметры учетной записи пользователя или процент выполненной сервером задачи, то не следует перезагружать всю страницу целиком, когда можно обновить только одно или несколько полей. Для этой цели можно использовать библиотеку jQuery с ее асинхронными ajax-запросами (Asynchronous Javascript and XML — асинхронный JavaScript и XML запрос). В данной статье будут представлены примеры интеграции JSP, сервлета и jQuery.

Рассмотрим два примера применения jQuery. В первом примере со страницы JSP отправим серверу асинхронный запрос и отобразим ответ — стандартный пример «Hello World!», когда пользователь вводит свое имя, а сервер его обрабатывает и возвращает ответ. Во втором примере с определенной частотой будем отправлять на сервер асинхронные запросы и на стороне клиента (в браузере) обрабатывать ответы, связанные с анализом процента выполнения задачи. Отправку ajax-запросов на сервер прекратим, как только задача будет выполнена на 100%.

Описание примеров

На следующем скриншоте представлена структура проекта в среде Eclipse, включающего :

  • сервлеты ProgressServlet, UserServlet, вызываемые из браузера при выполнении асинхронных ajax-запросов;
  • скриптовые функции (JavaScript) в файлах app-ajax.js, progress.js, выполняющие ajax-запросы;
  • JSP-страницы index.jsp, progress.jsp

JSP страница timer.jsp и скриптовая функция в файле timer.js приведены только для демонстрации использования JavaScript на JSP-странице.

Дескриптор приложения web.xml

В дескрипторе приложения в тегах регистрируем сервлеты (UserServlet, ProgressServlet) и определяем обращения к ним в тегах .

Выполнение запроса без перезагрузки страницы

Пример выполнения запроса к серверу без перезагрузки страницы включает сервлет, выполняющий обработку запроса на стороне сервера, JavaScript функцию, выполняющую обработку ajax-запроса на стороне клиента, и страницу JSP. На следующем скриншоте представлен интерфейс страницы после выполненного ajax-запроса.

Листинг сервлета UserServlet.java

При поступлении запроса в сервлет извлекается имя пользователя, формируется строка ответа, которая записывается в выходной поток в кодировке UTF-8.

Листинг скрипта app-ajax.js

Чтобы не загромождать код JSP-страницы не свойственной ее технологии информацией скрипты обработки (JavaScript) вынесены в отдельный файл. Комментарии отражают всю последовательность обработки запроса : сразу же после загрузки страницы выполняется функция и ждет события «потери компонентов фокуса». Как только курсор покидает компонент ‘userName’ выполняется ajax-запрос. В качестве параметров запроса указывается URL (сервлет, прописанный в web.xml), и data — данные в формате JavaScript. Результат обработки сервером запроса вернется в функцию ‘success’, которая разместит полученное значение в поле ‘ajaxUserServletResponse’.

Листинг страницы index.jsp

Страница JSP содержит поле ввода ‘userName’ и поле ответа сервера ‘ajaxUserServletResponse’. После ввода имени необходимо покинуть поле ‘userName’, чтобы ajax-запрос вызвал сервлет. Для этого можно щелкнуть мышью на пустом месте страницы, что приведет к выполнению ajax-запроса сервером и отображению результата запроса на странице. Для правильного отображения символов кириллицы используется кодировка UTF-8, согласованная с кодировкой в сервлете.

Контроль исполнения сервером задачи

Пример демонстрирует периодическое выполнение ajax-запроса к серверу. «Бедненький» интерфейс страницы, представленный на следующем скриншоте, включает только результат выполнения в виде процентного значения.

Листинг сервлета ProgressServlet.java

Сервлет моделирует процент выполнения задачи. Для этого при каждом запросе к текущему значению добавляется 10%. Полученное новое значение сохраняется в качестве атрибута в сессии и отправляется клиенту.

Листинг файла progress.js

Код скриптовой функции вынесен в файл progress.js, загружаемый браузером при открытии страницы. При выполнении ajax-запроса вызывается сервлет ‘server’, который возращает числовое значение. Если процесс выполнения не завершен, т.е. при значении меньше 100%, выполнение запроса повторится через 2 сек.

Листинг страницы progress.jsp

Интерфейс страницы включает только поле ‘progressId’, в который скриптовая функция записывает процент выполнения задачи.

Таймер на странице JSP

На статическую WEB-страницу можно загрузить JavaScript код, который без обращения к серверу будет выполнять определенные функции. Данный пример демонстрирует размещение на JSP-странице таймера, который ведет обратный отсчет времени. При старте страницы вызывается функция startTimer, код которой хранится в файле timer.js. Интерфейс страницы включает только поле таймера.

Листинг функции таймера

Функция таймера читает текущее значение, раскладывает его на часы:минуты:секунды и вычитает секунду. После этого «собирает» новое текущее время и отображает его значение в интерфейсе страницы без перезагрузки. Как только время завершится, процесс обновления времени остановится.

Скачать пример

Рассмотренный пример в виде проекта Eclipse с использованием maven можно скачать здесь (2.3 Кб).

Добавить комментарий