Ж у р н а л   о   к о м п ь ю т е р н ы х   с е т я х   и   т е л е к о м м у н и к а ц и о н н ы х   т е х н о л о г и я х
СЕТИ И СИСТЕМЫ СВЯЗИ on-line
  ПОИСК: ПОДПИСКА НА НОВОСТИ: НОМЕР:
    ДОМОЙ • Архив: Новостей | Конференций | НомеровПодписка
 
   
 
   
    
РЕДАКЦИЯ
 
Все о журнале
Подписка
Как проехать
Где купить
Отдел рекламы
График выхода журнала
Адреса в Интернет

РУБРИКАТОР
   
• Инфраструктура
• Информационные
   системы

• Сети связи
• Защита данных
• Кабельные системы
• Бизнес
• Колонка редактора
• Электронная
   коммерция

• Только на сервере
• Системы
   учрежденческой
   связи

• Новые продукты


Rambler's Top100

  

Быстрое обновление контента на базе AJAX

Бен Дьюпонт

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

Наш совет — используйте AJAX (Asynchronous JavaScript and XML) — механизм, избавляющий Web-сервер от необходимости регенерировать всю страницу целиком. Позволяя обновлять только динамический контент, такой, как новости и котировки акций, технология AJAX делает Web-сайты более интерактивными. Во время обновления использующие механизм AJAX страницы быстрее загружаются и обходятся меньшими системными ресурсами. Эта технология широко используется сайтом Google Maps и другими популярными Web-сайтами. Щелкая мышью и перемещая карту Google в нужном вам направлении, вы инициируете запрос на загрузку документа. Этот запрос и обновляет карту, не регенерируя при этом статические элементы страницы.

Между тем Microsoft Hotmail и другие сайты тоже могли бы извлечь из технологии AJAX выгоду для себя. Например, после прочтения сообщения Hotmail, чтобы обновить пиктограмму “Сообщение прочитано”, необходимо перезагрузить всю страницу. Если бы сайт Hotmail использовал AJAX, то он в большей степени походил бы на Outlook. Собственно, к этому мы и стремимся: сделать так, чтобы Web-сайты как можно больше были похожи на настольные приложения.

Суть вопроса

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

Основным объектом JavaScript технологии AJAX является XMLHTTPRequest, который отправляет запрос на загрузку документа на HTTP-сервер и получает от него ответ. JavaScript анализирует содержимое ответа и соответствующим образом обновляет Web-страницу. AJAX — это технология, применяемая лишь на клиентской стороне: ПО AJAX размещается не на Web-сервере, а на клиенте и инициируется клиентским Web-браузером. Все основные браузеры поддерживают объект XMLHTTPRequest либо посредством “родного” объекта JavaScript, либо посредством объектов ActiveX, поэтому технология AJAX легко доступна для разных платформ. Основная разница между реализациями технологии AJAX на базе “родного” объекта JavaScript и на базе объекта ActiveX заключается в процессе создания объектов.

Многие браузеры также поддерживают стандарт API концерна World Wide Web Consortium (W3C), основанный на объекте XMLHTTPRequest. Однако проблема в том, что существующие реализации API W3C не полностью совместимы друг с другом, поэтому только то, что вы используете API W3C, еще не означает, что он работает со всеми браузерами. Хотя методы и свойства объекта XMLHTTPRequest для всех браузеров идентичны, между различными API имеются незначительные различия в функциональности, которые мы обсудим ниже.

С точки зрения самого высокого уровня запрос AJAX выглядит как самый обычный HTTP-запрос с браузера. Однако само действие по преобразованию внешнего вида Web-страницы скрывается за кулисами. Сначала производится исходная загрузка страницы, во время которой с Web-сервера на браузер передается контент страницы, включая компоненты AJAX. Поддерживающая технологию AJAX страница содержит HTML-компоненты, которые по щелчку мыши инициируют HTTP-запрос с помощью объекта XMLHTTPRequest. Результат такого запроса можно использовать для модификации любого элемента таблицы, если это предусмотрено моделью DOM (Document Object Model). Естественно, что все эти изменения имеют место на клиентской стороне.

В задачи объекта XMLHTTPRequest, как и любого браузера, входит отправка запросов get или post/put на Web-сервер. Однако объект XMLHTTPRequest может отправлять в одно и то же время любое число запросов. При этом результат запросов, принимаемый объектом XMLHTTPRequest, не контролируется непосредственно браузером, поэтому не происходит и автоматического обновления или регенерации страницы. Любыми изменениями страницы, являющимися результатом запроса, управляет программа JavaScript.

Строку и/или данные можно добавлять к команде post, а сам запрос обрабатывать посредством страницы ASP (Active Server Pages), PHP (Personal Home Page), либо используя любую другую страницу сценариев. Вместо того чтобы представлять форму по нажатию кнопки (требуя, таким образом, регенерацию страницы), событие onClick может вызвать метод JavaScript, инициирующий запрос post посредством объекта XMLHTTPRequest. Серверный же сценарий обрабатывает запрос и возвращает ответ в формате XML.

Допустим, ваш Web-сайт непрерывно обновляет данные с объемами продаж и новостные бюллетени. Данные о продажах за предыдущие часы являются статическими, тогда как данные за текущий час обновляются каждые пять минут. Чтобы получить самые свежие данные, пользователи должны нажимать на кнопку “Обновить” (Refresh) своего браузера. Обновление занимает несколько секунд, даже если большая часть страницы не изменялась. Используя же AJAX, вы можете, например, запрограммировать с помощью таймера отправку запросов на обновление информации через каждые пять минут, и страница сценариев на серверной стороне будет всякий раз пересчитывать данные о продажах лишь за текущий час. Возвращаться браузеру будут только эти данные, пользователям не нужно будет без конца нажимать кнопку “Обновить” и Web-серверу не придется утруждать себя многократным пересчитыванием одних и тех же данных.

Имеющиеся инструментальные средства AJAX

Ваша организация может начать использовать технологию AJAX прямо сейчас — все, что вам необходимо для этого, в современных браузерах уже имеется. Кроме того, на рынке есть ряд средств, позволяющих использовать AJAX при разработке Web-сайтов, таких, как AquaLogic User Interaction компании BEA. AquaLogic User Interaction содержит набор инструментальных средств разработки, называемый компанией BEA средой разработки сценариев и представляющий собой набор интерфейсов API для упрощения создания приложений, поддерживающих технологию AJAX. Инструментальные средства BEA разделяют Web-страницу на отдельные “портлеты” (portlet), каждый из которых имеет свою функциональность и может связываться с различными серверными системами. Один портлет можно связать с системой CRM, а другой — обновлять вместе с документами, имеющими отношение к какому-нибудь счету, содержащемуся в системе CRM.

Компания BEA использует AJAX во многих своих приложениях, таких, как средства коллективной работы AquaLogic Interaction Collaboration. Это ПО использует Outlook-подобную модель с левым окном и папками. Щелчок по элементу левого окна приводит к регенерации только правого окна. Кроме того, имеется контекстное меню, выводимое при нажатии правой кнопки мыши, еще один пример того, как можно использовать AJAX для создания приложений, внешне похожих на настольные.

Компания Oracle начала разрабатывать среды типа AJAX с 1998 г., т. е. задолго до того, как появился сам этот термин. Связующее ПО Fusion компании Oracle использует богатый набор поддерживающих технологию AJAX библиотечных компонентов под общим названием Oracle ADF Faces. Это такие графические элементы, как сплиттеры (splitter), индикаторы процесса (slider), динамические графики, столбчатые диаграммы и др. Если вы хотите использовать ПО с открытым исходным кодом, то можете воспользоваться такими инструментальными средствами, как DOJO, которое включает в себя файлы JavaScript, HTML и CSS, в совокупности образующие мощный инструментарий AJAX для создания интерактивных Web-сайтов.

Хотя имеется несколько обладающих гибкостью и функциональностью объекта XMLHTTP-Request методов, стоит упомянуть по меньшей мере один из них, а именно, HTML iframe консорциума W3C, поддерживаемый всеми основными браузерами. Тег iframe языка HTML позволяет отображать в рамках одной страницы множество других страниц, так что функциональность страницы можно разделить, например, между нею и плавающими фреймами (iframe). Постоянно обновляемую таблицу можно поместить в свой собственный фрейм iframe и регенерировать ее только тогда, когда эта таблица изменяется, а остальная часть страницы будет оставаться неизменной.

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

Модификация поведения страниц

Используя технологию AJAX, вам следует иметь в виду, что объект XMLHTTPRequest ведет себя в разных браузерах по-разному. Вам необходимо протестировать ваши Web-сайты AJAX со всеми браузерами и платформами, с которыми, по вашему предположению, будут работать посетители ваших сайтов. Вас поджидает одна потенциальная проблема, которая связана с тем, что запросы get протокола HTTP для заданного указателя URL должны всегда возвращать одну и ту же страницу HTML. Поэтому, чтобы гарантировать получение ответа на запрос get с сервера HTTP, а не из кэша браузера, вам, возможно, придется модифицировать различные заголовки HTTP (посредством функции setRequestHeader(...) объекта XMLHTTPRequest).

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

Кроме того, имейте в виду, что реализацией XMLHTTPRequest объекта компании Microsoft в браузере IE является объект ActiveX и что многие предприятия отключают ActiveX по соображениям безопасности..





  
12 '2006
СОДЕРЖАНИЕ

бизнес

• Широкополосные сети от Huawei

• Время «бродбэнда»

инфраструктура

• Перспективные технологии центров обработки данных

• «Обреченный» рынок

• Анализаторы спектра в борьбе с радиопомехами

• Тестируем ПО управления ресурсами хранения данных

информационные системы

• Групповая политика AD. Вам с гарниром или без?

• Быстрое обновление контента на базе AJAX

сети связи

• Предприятие, работающее по IP

кабельные системы

• Точные и простые в использовании скалыватели оптоволокна

• Пусть в ЦОДе станет прохладнее

• С акцентом на «софт»

защита данных

• Оценка рисков при выработке стратегии безопасности ИТ


• Калейдоскоп



 Copyright © 1997-2007 ООО "Сети и Системы Связи". Тел. (495) 234-53-21. Факс (495) 974-7110. вверх