Продолжается подписка на наши издания! Вы не забыли подписаться?

Рассмотрение технологий Ajax
Обзор без рекламных слоганов

Автор: Крис Лафра
Руководитель отдела улучшения производительности, IBM
Опубликовано: 19.04.2007

Сегодня одной из самых актуальных тем, поднимаемых при обсуждении вложения денег в IT, и в блогах разработчиков, является технология Ajax. Основные составляющие Ajax используются уже не один год, таким образом, Ajax не является чем-то новым. Однако само название Ajax, являющееся аббревиатурой от Asynchronous JavaScript and XML, было предложено только в 2005 году Десси Джеймсом Гарретом из компании Adaptive Path. Основой Ajax является динамический HTML (DHTML), а главной задачей – уменьшение числа обращений к серверу. При обновлении информации Ajax-приложение не перегружает страницу полностью. Вместо этого JavaScript-код отправляет XML-запрос на сервер, а затем заменяет необходимую часть в DOM для обновления страницы.

ПРИМЕЧАНИЕ

Список терминов

Каждая новая технология вводит в обращение новые термины, и Ajax не является исключением. Ниже приводится несколько аббревиатур, относящихся к технологии Ajax:

Ajax: асинхронный JavaScript и XML (Asynchronous JavaScript with XML).

XML: расширяемый язык разметки (Extensible Markup Language).

RIA: Internet-приложение с расширенными возможностями (Rich internet application).

RSS: Простой сбор информации (Really Simple Syndication).

PS: Смещение парадигмы (Paradigm shift).

TP: Точка прикрепления (Tipping point).

VC: Вложение с риском (Venture capital).

До развития Ajax DHTML использовался в основном для реализации меню, оглавлений, ограниченных видов анимации. При этом достаточно сложно создать кросс-браузерное приложение. Данная ситуация послужила толчком к созданию таких компаний, как Bindows, предлагающих различные абстракции для разработки расширенных клиентов, онлайн-версия Eclipse является одним из таких примеров (см. Ресурсы ).

Возможно, наиболее известным Ajax-приложением является Google Maps. Оно заложило основу для целой новой компьютерной дисциплины (запрос в Google по ключевым словам "Hacking Google Maps" возвращает более двух миллионов ссылок). Хорошими примерами настройки Google Map являются прозрачные карты Bus Monster и HousingMaps.com. На мой взгляд, наиболее захватывающими являются возможности персонализации Google, с помощью которых вам предоставляется возможность размещения нового и существующего контента на собственной странице.

Если вы хотите самостоятельно создать Ajax-приложение, вам необходимо принять во внимание рекомендации, даваемые в этой статье. Вы ознакомитесь как с преимуществами, так и с недостатками, присущими данной технологии. Заметьте, что данная статья не рассчитана на новичков, и в ней не обсуждаются такие вещи, как, например, использование XmlHTTPRequest. Она предназначена для тех, кто знаком с техническими деталями, и хочет иметь более широкое представление о применении Ajax при реализации Web-разработок. В ресурсах вы можете найти ссылки на вводный материал по Ajax.

Если бы у меня был молоток …

"Во времена нашей молодости нам говорили, что если все что-то делают, то это еще не является причиной подражать им. В наши дни данное правило является стандартным при выборе программных продуктов." 
Барри Гем 

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

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

Ajax также оказал значительное влияние на капиталовложения в IT. В последние время инвестиционный климат для новых проектов значительно улучшился, и одну из ключевых ролей в этом процессе сыграл Ajax. Так, например, новая компания Zimbra, которая активно использует Ajax-технологии, уже получила инвестиции в размере 16 миллионов долларов. Другие новые компании также заявляют, что они работают с Ajax с целью повышения своей инвестиционной привлекательности.

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

Фреймворки

Реализации браузеров различаются в нескольких ключевых моментах:

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

На волне успеха Google возникло множество различных фреймворков. Одним из самых заметных из них является Atlas от Microsoft. Он замечателен тем, что позиционируется как нейтральный к браузерам. Он модернизирует JavaScript, определяя богатую библиотеку классов, добавляя наследование и интерфейсы, и описывая пространства имен. Хорошими примерами использования Atlas являются Virtual Earth, Outlook Web access, и Start.com (см. Ресурсы). Вышесказанное демонстрируется на Рисунке 1, показывающем реальные изменения; Atlas является одним из первых приложений Microsoft, которое лучше отображается в Firefox, чем в Internet Explorer.


Рисунок 1. Различия отображения Atlas в браузерах (обратите внимание, что тени изображений выглядят лучше в Firefox, чем в Internet Explorer).

Не пытайтесь создать свой собственный фреймворк, так как это долгий и сложный процесс.

Список доступных Ajax-фреймворков приведен в разделе Ресурсы.

Амнезия

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

Но с распространением Ajax-технологий разработчики все чаще стремятся к разработке так называемых одностраничных HTML-приложений, которые не ведут историю. Большинство Ajax-приложений после загрузки не изменяют свой URL. Если такой сайт не поддерживает кнопки "Назад", "Стоп", и "Обновить", а также закладки, то пользователям может быть трудно вернуться к определенному положению или поделиться ссылкой с другими людьми.

Пользователям, ищущим последовательность из нескольких адресов, сервис Google Maps до последнего времени не предоставлял возможности запоминания истории, таким образом, кнопка "Назад" была бесполезна. В последнем релизе данный недостаток был устранен, и теперь кнопки "Назад" и "Вперед" работают, как ожидается. Хотя история навигации теперь и поддерживается, но при этом не изменяется адресная строка. Вместо этого предлагается использование макроса, изменяющего базовый URL, который позволяет создать ссылку на данную страницу. Различные системы Wiki сталкиваются с подобными проблемами и обычно содержат кнопку для создания "постоянной" ссылки.

В заключение к данному разделу необходимо заметить, что при создании Ajax-приложений необходимо уделять особое внимание поддержанию истории браузера. Основное правило гласит: если пользователь переходит по ссылке, то необходимо создавать объект в истории браузера, чтобы кнопка "Назад" работала предусмотренным образом. Кроме того, необходимо позволить создание закладок при помощи постоянных ссылок.

Взаимодействие

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

Если пауз не удается избежать, используйте значок "Загрузка", как, например, в Gmail, см. Рисунок 2.


Рисунок 2. Значок "Загрузка" в Gmail.

Ниже приводится простой рецепт: запустите таймер, который выводит сообщения каждые 100 миллисекунд. В случае отображения результата, внесите изменения в DOM и запомните результат. Если сообщение появляется после того, как все действия выполнены, игнорируйте его. В противном случае результат будет означать, что действие все еще выполняется, и вам необходимо вывести соответствующие сообщение. Спрячьте всю логику в сервис XmlHttpRequest, включив при этом поддержку нескольких параллельных запросов.

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

Ложка дегтя

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

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

Gmail поддерживает протокол POP, что позволяет пользователям иметь доступ к почте при помощи Microsoft Outlook или любого другого почтового клиента, поддерживающего протокол POP, даже если они не подключены к сети. Главной проблемой в Ajax является отсутствие встроенных средств, поддерживающих работу в оффлайне.

Заставляя думать

Основной причиной успеха Web является предсказуемость и простота пользовательского интерфейса. Практически каждый может двигать курсор мыши, нажимать на ссылки, прокручивать линейку прокрутки и нажимать кнопку "Назад". С ростом популярности Ajax растет риск, что разработчики усложнят интерфейс в непредсказуемом направлении. Вы наименее заинтересованы в том, чтобы заставить пользователя думать. Те, кому интересно узнать больше о применении Web-приложений, могут обратить внимание на статью Стива Крага Не заставляйте меня думать (см. Ресурсы). В ней не описывается собственно Ajax, зато дается множество советов о важности хорошего дизайна для сайта.

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

Средства разработки

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

IDE, которая будет сочетать все выше перечисленные возможности, и будет удобна в использовании для дизайнеров, аналитиков, программистов и администраторов баз данных, обречена на успех на рынке. Я думаю, что такой средой может стать Eclipse Ajax Tooling Framework.

Параллельность

Первая буква в аббревиатуре Ajax означает асинхронную связь. Данная связь именуется асинхронной, так как события не наступают немедленно после некоторых действий. Может пройти достаточно времени, прежде чем будет получен ответ (см. выше обсуждение взаимодействия), реально же на некоторые запросы можно вообще никогда не получить ответа. Web является нестабильной средой, и планирование целостности должно быть неотъемлемой частью написания программ на Ajax. Так как одновременно может быть запущено несколько запросов, то программа становится параллельной, а параллелизм является достаточно сложной вещью.

Единственно, что спасает большинство разработчиков, - это то, что интерпретаторы JavaScript являются однопоточными. Другим словами, в определенный момент времени работает либо обработчик событий, либо обработчик XML HTTP-запросов. Вызовы никогда не происходят параллельно. Таким образом, вам не нужно заботиться о блокировках DOM. В JavaScript отсутствует понятие потока и, таким образом, нет функции его приостановки. Все действия выполняются непосредственно с интерфейсом, и наличие функции приостановки может легко «подвесить» весь браузер.


Рисунок 3. Автосохранение будет пользоваться большим успехом у пользователей.

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

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

"Открытый код" (по умолчанию)

Приложения JavaScript выполняются в браузере, и поэтому могут быть легко подвергнуты реинжинирингу. Загружая JavaScript-файлы по требованию, вы можете провести пользователей Internet Explorer, но другие браузеры, как, например, Firefox, легко отображают текущий DOM со всей структурой, для этого всего лишь надо выбрать пункт меню Просмотр исходного кода выделенного объекта. Если же кому-то необходимо получить доступ к исходному коду вашего приложения, он может использовать простой скрипт, созданный в Mozilla Greasemonkey, отладчик типа Venkman или же специальный тулбар в Internet Explorer.

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

Паранойя никогда не помешает

В смысле безопасности Ajax не приносит никаких нововведений. Технологии, которые лежат в его основе, доступны уже долгое время. Среди них есть скрытые фреймы iframes или технология удаленных скриптов Microsoft. Если существующие Web-приложения подвержены проблемам безопасности, то те же проблемы возникают и при использовании Ajax-решений.

Разработчики должны учитывать, что запросы GET и POST могут быть перехвачены и изменены. С доступностью таких технологий, как Greasemonkey, пользователи могут легко изменить запрос, отправляемый на сервер, а также представление контента в браузере. В Ajax используются те же механизмы безопасности, что и в других Web-приложениях. Когда вы пересылаете конфиденциальные данные при помощи XmlHTTPRequest, используйте подходящие методы аутентификации и туннелирование.

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

Об остальном в другой раз...

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

В следующей статье мы обсудим другие острые темы: перерисовку документа, тестирование, модели публикации и подписки, производительность, доступность, поддержку старых браузеров и т.д. Я также расскажу об интересной особенности, предлагаемой Ajax – создании Web-сайтов внутри Web-сайтов.

Часть 2. Измените свою жизнь при помощи mashup-решений

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

В данной статье будут рассмотрены такие вопросы, как перерисовка документов, тестирование, вопросы подписки и публикации, производительность, доступность, поддержка старых браузеров и некоторые другие. Я также расскажу об интересной возможности Ajax по созданию Web-сайтов внутри других Web-сайтов.

Заблуждение

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

Основной проблемой Ajax-приложения является то, что он не воспринимает документ необходимым образом. Однако, например, в приложении Google Maps не существует данной проблемы, так как в нем не применяется полос прокрутки. Но, если у вас, например, имеется длинный список писем в Gmail, то вы можете легко запутаться, так как в нем используются полосы прокрутки, и любое нажатие на ссылку изменяет содержимое и полосы прокрутки.

Ajax-приложения, которые обращаются с документом как с приложением, должны избегать обновления документа, если результат должен добавляться к текущему представлению. Управление представлением и объектами DOM не являются простыми задачами и, таким образом, Ajax-приложения не должны использовать запросы, требующие долгого времени ответа. В таком случае лучше добавить кнопки "Повторить" или "Обновить".

Совет: Избегайте применения таких свойств, как явное управление полосами прокрутки.

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

"Постоянные тесты позволят вам 
улучшить приложение." Давид Огилви (David Ogilvy)

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

Большинство инструментов автоматического тестирования интерфейсов пользователя не поддерживает DHTML. В случае использования динамического HTML, управляющего элементами отображения и изменяющего структуру DOM, инструменты тестирования не имеют представления, как отслеживать такие изменения. Представьте, например, как бы вы тестировали такой сайт, как Start.com. Лично у меня нет никаких идей по данному вопросу, кроме как нанять большую команду низкооплачиваемых тестировщиков.

Хотя использование JavaScript и усложняет тестирование, но в случае применения технологии Ajax у вас появляется преимущество, выраженное в использовании компонентов, облегчающих тестирование бизнес-логики. Таким образом, вы получаете расширенные возможности функционального тестирования.

Что такое push-технология?

На рисунке 4 показан отзвук из прошлого, push-технология PointCast.


Рисунок 4. Push-технология в действии.

В 1996 году компания PointCast наделала много шума, предложив бесплатное решение, передающее по сети контент и рекламу. Приложение PointCast 2.6 требовало компьютера с процессором 486/33, 8 мегабайтами ОЗУ и 10 мегабайтами на HDD (данные цифры очень малы в наше время).

Сравнивая интерфейс PointCast со Start.com, вы найдете огромное количество сходств. Самое время задаться вопросом: "Что же еще может предложить Ajax по сравнению с PointCast?" Если не считать большую четкость изображений с высоким разрешением, тени и плавное перемещение, то у пользователей до сих пор нет достаточного количества информации по интересующим их темам.

В Ajax отсутствует в достаточной мере поддержка архитектур подписки и публикации, так как за исключением HTTP-потоков, в нем отсутствуют другие стандартные способы соединения с IP-адресом. Например, Ajax-приложение может открыть очень долгое полнодуплексное TCP/IP соединение с сервером MQSeries через объект XMLSocket во Flash при помощи пакета интеграции Flash/JavaScript. В данное время все, на что способны Ajax-приложения – это посылать запросы на сервер, с которого они были загружены, и использовать его в основном в виде прокси или шлюза к серверу данных. Это может породить большую нагрузку на сеть и на серверы, которым придется одновременно обрабатывать тысячи, а то и миллионы (вот цена успеха!) запросов пользователей. Здесь требуется применение альтернативных технологий.

Производительность ЦПУ и утечки памяти

Производительность современных настольных компьютеров постоянно растет, однако перенос частей кода с сервера на клиент увеличивает требования к системе клиента. Например, 512 МВ ОЗУ стоят всего 25$, но установка оперативной памяти в большем объеме может стоить очень дорого. Более медленные машины столкнутся с трудностями при работе с DHTML-анимациями и преобразованиями DOM. Также увеличение количества передаваемого кода может замедлить загрузку сайта.

Многие не знают, что JavaScript-приложения зачастую являются причиной утечки памяти. Если вы недостаточно внимательны, то с течением времени ваш браузер будет занимать все больше и больше памяти. В прошлом производительность JavaScript-приложений была ограничена скоростью процессора. Хотя быстродействие браузеров постоянно увеличивается, вы должны помнить, что не каждый клиентский компьютер оснащен такими же компонентами, как и машина разработчика.

Доступность

Доступность для людей с ограниченными возможностями зачастую игнорируется большинством разработчиков. Но разработчикам предъявляются моральные, а то и законодательные требования по созданию сайтов с учетом возможности доступа к нему инвалидов. Благодаря декларативному существу языка HTML, вы можете использовать такие его особенности, как увеличение шрифтов для людей с недостатками зрения.

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

JavaScript все еще не везде поддерживается

Статистика за октябрь 2005 года с сайта thecounter.com показывает, что в 10 процентах всех браузеров по тем или иным причинам выключена или недоступна поддержка JavaScript. Данный показатель лучше, чем 15 процентов в 2001 году, однако разработчикам необходимо все же учитывать тех пользователей, которые не хотят или не могут использовать JavaScript.

Еще один подкласс браузеров, не поддерживающих JavaScript – поисковые роботы. В случае сайтов, активно использующих Ajax, необходимо уделить особое внимание их работе с поисковыми машинами. Ключевые слова в заголовках могут помочь в индексировании ваших страниц. С другой стороны, Ajax-приложения могут быть полезны для сокрытия некоторых частей контента от поисковых роботов.

Намерения

Обычно ссылки на сайте ведут на другие страницы, и пользователям известен данный факт. Более того, GET-запросы, реализующие данную функциональность, по умолчанию не сохраняют состояния сесиии (stateless). Хотя, насколько я знаю, такое поведение и не описано в стандарте, браузеры и поисковые машины по умолчанию ожидают от ссылок, работающих с GET-запросами, именно такого поведения. Если Ajax-приложение будет использовать ссылки для изменения состояния сессии, такое поведение может поставить в тупик всех, в том числе и несчастных пользователей.

Не ожидайте, что все пользователи будут способны понять, как персонализировать страницу при помощи размещения необходимых элементов на странице. Они даже могут не захотеть заниматься такими вещами. Далее, вам необходимо объяснить пользователям, что делать, в простых и доступных словах - по той же причине, по какой многие дорожные знаки в США содержат письменный текст. Выражения из одной области, например, жаргон пользователей Linux/PHP, будут не понятны другой, например страховщикам в возрасте 50 лет. Некоторые знаки, например, могут быть адекватно восприняты представителями одной культуры, но при этом оскорбить представителей другой.

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

Mashup-решения

"Сегодня большая часть программного обеспечения существует только для работы с другим программным обеспечением." -- И.О. Анжел 

Подсознательно большинство Ajax-приложений воспринимаются как приложения, собираемые из частей. Зачастую преимущества Ajax ограничивают тем, что его использование уменьшает количество обращений к серверу. Однако, действительные преимущества использования Ajax проявляются не в применении в простых порталах, а в настоящих прозрачных клиентских mashup-решениях, см. рисунок 5 (mashup-решения – решения, интегрирующие на странице информацию из разнородных источников).


Рисунок 5. Полный потенциал Ajax.

Например, персональные страницы Google или Start.com могут проводить поиск и сохранять его результаты на текущей странице. При помощи coockie-файлов или Flash-объектов вы можете сохранить текущее состояние страницы и вернуться к нему при следующем обращении. Как Google, так и Start.com предлагают средства, позволяющие разработчикам создавать свои собственные портлеты. Но в данном случае вы все еще остаетесь на уровне портала.

Чтобы добиться успеха, технологии Ajax необходимо уйти от данного ограничения. Вам необходима клиентская версия Greasemonkey (см. Ресурсы), которая позволит дизайнерам и опытным пользователям опрашивать информационные ресурсы и создавать их представление. Такая функциональность становиться все более доступной, но необходимо создание упрощенных программных моделей для их использования более широкой аудиторией, а не только профессионалами из Google или Microsoft.

В качестве примера я создал демоверсию клиентского mashup-решения (http://eclipsefaq.org/chris/ajax/mashup.html). Страница полностью создается на стороне клиента при помощи JavaScript, не используя при этом программирования на стороне сервера. Данный пример показывает пример получения информации из HTML (weather.com), из SQL базы данных на сервере и из RSS-ленты. То, что я пытался сделать, представляет единое решение по сбору и представлению информации. Вы можете ознакомиться с исходным кодом демостраницы, чтобы понять, как декларативные шаблоны выполняют преобразование HTML и несложную бизнес-логику.

Редактирование "на лету"

Большое количество систем wiki позволяет вам редактировать статьи в редакторе и отправлять их на сервер, не покидая ваш браузер. Таким же образом вы можете создавать приложения (если их можно так назвать) без установки средств разработки. Ajax-технологии позволяют изменять все больше и больше аспектов дизайна Web-сайта прямо в среде их отображения. Я называю данную технологию редактированием "на лету". Другие придерживаются термина "ситуационное программирование". Я создал простую демонстрацию, позволяющую редактировать часть DOM (http://eclipsefaq.org/chris/ajax/editing.html), чтобы показать работоспособность данных технологий.

Сохранение

Отличным примером редактирования и сохранения HTML-документов в файловой системе является приложение TiddlyWiki (см. Ресурсы). Если вы просматриваете TiddlyWiki, это означает, что вы полностью загрузили данное приложение, так как оно создано на JavaScript и встроено в страницу. HTML редактируется «на лету» (в том же окне браузера, где вы просматривали документ) и сохраняется в локальной файловой системе.

Если вы предпочитаете не хранить материалы локально, то можете использовать технологию WebDAV для хранения ваших ресурсов в Web. WebDAV является одной из многих технологий, позволяющих обновить страницу после редактирования «на лету». Альтернативное решение заключается в загрузке страницы при помощи запроса XmlHTTPRequest и соединения со службой REST. Далее вам необходим сервер, получающий XML-запросы, и поддерживающий несколько версий страниц. Такая служба может быть легко реализована при помощи нескольких строчек PHP-кода.

Я создал пример (http://eclipsefaq.org/chris/ajax/persistence.html), иллюстрирующий технологию извлечения DOM текущего документа, передачи его на сервер и дальнейшей его загрузки в другом браузере. Ознакомьтесь с ресурсами на странице примера, для получения информации по реализации данного решения.

Заключение

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

Ресурсы

Научиться

Получить продукты и технологии


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

Copyright © 1994-2016 ООО "К-Пресс"