AJAX: предметный разговор
С того момента, когда Google решил использовать для интерфейса своего нового картографического сервиса (maps.google.com/) технологии SOAP/XMLHTTP, специализированные ресурсы буквально переполнились материалами, посвященными AJAX. Темой данной статьи станет обсуждение как преимуществ AJAX, так и некоторых нюансов, возникающих при его использовании веб-разработчиками. Кроме того, будет представлено тестовое рабочее приложение, демонстрирующее рассматриваемую технологию. Вы также можете просмотреть данную статью /* на английском языке – прим. ред. */ вместе с работающим приложением на моем сайте по адресусайтБолее того, вы можете загрузить исходники этого приложения и попробовать поработать с ними самостоятельно.
Обозначение AJAX мало что рассказывает про эту комбинацию технологий DHTML (JavaScript и HTML) и XML, предназначенную для создания симпатичных во всех отношениях веб-интерфейсов. Wikipedia дает хорошее определение для AJAX (сайтоднако я опишу его более кратко. Традиционные веб-приложения для генерации веб-страниц выдают последовательные строки HTML, обновляя всю страницу целиком, когда пользователь переходит по ссылке или нажимает кнопку. AJAX же подменяет на странице только ту информацию, которая требует обновления и передает новые данные в фоновом режиме. AJAX – это технология, которая, похоже, будет использоваться все более и более широко.
До настоящего момента для того, чтобы передавать порции данных и с помощью средств сервера обновлять страницу, веб-разработчики прибегали к различным трюкам. Один из популярных способов заключался в запросе страницы с помощью скрытых элементов Iframe или Frame, которые потом можно было обработать с помощью JavaScript. Другой способ заключался в использовании всплывающих окон, запрашивающих и обновляющих данные, которые потом записывались в родительском (opener) окне. Кроме этого, для сохранения дополнительной информации клиента применялись скрытые поля форм и «эксплореровский» InlineXML. Короче говоря, разработчикам приходилось изрядно попыхтеть над задачами, которые так элегантно решает AJAX. Одна из ключевых технологий, лежащих в основе AJAX – это Request-объект XMLHTTP. Его удобно воспринимать в качестве своеобразного маленького скрытого веб-браузера. Метод XMLHTTPRequest изначально был применен Microsoft в IE4 для их почтового клиента Outlook Web Access. Когда пользователи взаимодействуют с веб-страницей, этот скрытый браузер запрашивает в фоновом режиме только те данные, которые необходимы в данный момент. Другая базовая технология – XML Document Object Model (DOM), дает разработчикам возможность рассматривать каждую страницу как дерево с ветвями и листьями, которые можно легко добавлять иди изменять.
Применяя AJAX, вы получаете лучший контроль над документом и сокращаете объем данных, передаваемых между клиентом и сервером. Кроме этого, вы избавляетесь от надоедливого моргания веб-страницы с часто обновляемыми сведениями.
У этих достижений есть и обратная сторона. В нагрузку вы получаете более сложную для разработчика структуру программы и риск несовместимости с некоторыми браузерами. Эти недостатки хорошо известны и упоминаются в ряде публикаций. В итоге многие разработчики не рискуют связываться с AJAX. Это понятно – разработчики всегда стремятся сделать свои страницы доступными для максимально большого числа пользователей. Теперь времена изменились, и сейчас подавляющее большинство серферов пользуются веб-браузерами, поддерживающими AJAX.
Вы можете загрузить архив с кодом тестового приложения, который расположен по адресусайтЭто приложение демонстрирует довольно веселые определения, взятые из словаря, расположенного на сайте Project Gutenberg (1811 Dictionary of The Vulgar Tongue By Captain Grose). У нас на сервере будет работать связка из PHP и MySQL, к которой приложение будет отсылать запросы на выдачу случайных определений. С помощью PHP мы будем конвертировать набор выдаваемых записей базы данных в XML. На стороне клиента мы будем использовать XMLHTTP для того, чтобы отсылать серверу запросы через заданные промежутки времени и методы XML DOM для обновления страницы.
Помните, в самом начале статьи мы говорили о некоторых нюансах в применении AJAX? Для получения максимальной отдачи от использования AJAX вы должны сосредоточиться на эффективности своих приложений. Старайтесь не просто обновлять ту или иную часть страницы, но также стремитесь к минимизации порождаемого этими действиями трафика. Для примера возьмем некую страницу размером 10 килобайт. Если вы будете постоянно выводить на нее некоторые данные, например, биржевые сводки, обновляя всю страницу, это создает трафик объемом 60 килобайт в минуту, 3600 килобайт в час и так далее. Используя AJAX, вы запрашиваете у сервера только изменяющиеся данные, размер которых в случае наших определений из словаря составляет всего около 1 килобайта.
Перед тем, как устраивать праздник по поводу сэкономленного трафика, убедитесь, что вы не растратили этот подарок попусту. Не убивайте трафик на эти ОгромныеИменаЭлементовКоторыеТолькоМестоЗанимают. Ниже приведен пример кода XML, который призван продемонстрировать, с позволения сказать, «определения» XML, использованные на рассматриваемой странице. Я сэкономил место, используя имена элементов и атрибутов, состоящие из одной буквы, а также помещая данные в атрибуты каждого элемента. Назначение этого кода – перенос данных в рамках одного приложения, а не между разными приложениями, поэтому здесь такой подход оправдан. Если бы эти данные предназначались для внешнего использования, я бы тоже примкнул к лагерю сторонников синтаксиса с хорошим описанием его конструкций.
<t> <r t="PELL-MELL" d="Tumultuously, helter skelter, jumbled together."> <r t="LURRIES" d="Money, watches, rings, or other moveablcs."> <r t="SNEAKING BUDGE" d="One that robs alone."> <r t="DEVIL'S DAUGHTER'S PORTION:" d="Deal, Dover, and Harwich, The Devil gave with his daughter in marriage; And, by a codicil to his will, He added Helvoet and the Brill; a saying occasioned by the shameful impositions practised by the inhabitants of those places, on sailors and travellers"> <r t="STAR LAG" d="Breaking shop-windows, and stealing some article thereout."> </t>
Стоит также держать в уме тот факт, что AJAX – это нечто большее, чем просто инструмент для создания каких-нибудь сменяющихся баннеров. Вы можете работать с данными, например, изменяя число возвращаемых записей, частоту обновления или настраивая свою программу. AJAX может стать основой для создания серьезных веб-приложений, гораздо более гибких, чем традиционные программы типа «кликни и обнови».
n8f8, перевод Алексея Кутовенко.
Обозначение AJAX мало что рассказывает про эту комбинацию технологий DHTML (JavaScript и HTML) и XML, предназначенную для создания симпатичных во всех отношениях веб-интерфейсов. Wikipedia дает хорошее определение для AJAX (сайтоднако я опишу его более кратко. Традиционные веб-приложения для генерации веб-страниц выдают последовательные строки HTML, обновляя всю страницу целиком, когда пользователь переходит по ссылке или нажимает кнопку. AJAX же подменяет на странице только ту информацию, которая требует обновления и передает новые данные в фоновом режиме. AJAX – это технология, которая, похоже, будет использоваться все более и более широко.
До настоящего момента для того, чтобы передавать порции данных и с помощью средств сервера обновлять страницу, веб-разработчики прибегали к различным трюкам. Один из популярных способов заключался в запросе страницы с помощью скрытых элементов Iframe или Frame, которые потом можно было обработать с помощью JavaScript. Другой способ заключался в использовании всплывающих окон, запрашивающих и обновляющих данные, которые потом записывались в родительском (opener) окне. Кроме этого, для сохранения дополнительной информации клиента применялись скрытые поля форм и «эксплореровский» InlineXML. Короче говоря, разработчикам приходилось изрядно попыхтеть над задачами, которые так элегантно решает AJAX. Одна из ключевых технологий, лежащих в основе AJAX – это Request-объект XMLHTTP. Его удобно воспринимать в качестве своеобразного маленького скрытого веб-браузера. Метод XMLHTTPRequest изначально был применен Microsoft в IE4 для их почтового клиента Outlook Web Access. Когда пользователи взаимодействуют с веб-страницей, этот скрытый браузер запрашивает в фоновом режиме только те данные, которые необходимы в данный момент. Другая базовая технология – XML Document Object Model (DOM), дает разработчикам возможность рассматривать каждую страницу как дерево с ветвями и листьями, которые можно легко добавлять иди изменять.
Применяя AJAX, вы получаете лучший контроль над документом и сокращаете объем данных, передаваемых между клиентом и сервером. Кроме этого, вы избавляетесь от надоедливого моргания веб-страницы с часто обновляемыми сведениями.
У этих достижений есть и обратная сторона. В нагрузку вы получаете более сложную для разработчика структуру программы и риск несовместимости с некоторыми браузерами. Эти недостатки хорошо известны и упоминаются в ряде публикаций. В итоге многие разработчики не рискуют связываться с AJAX. Это понятно – разработчики всегда стремятся сделать свои страницы доступными для максимально большого числа пользователей. Теперь времена изменились, и сейчас подавляющее большинство серферов пользуются веб-браузерами, поддерживающими AJAX.
Вы можете загрузить архив с кодом тестового приложения, который расположен по адресусайтЭто приложение демонстрирует довольно веселые определения, взятые из словаря, расположенного на сайте Project Gutenberg (1811 Dictionary of The Vulgar Tongue By Captain Grose). У нас на сервере будет работать связка из PHP и MySQL, к которой приложение будет отсылать запросы на выдачу случайных определений. С помощью PHP мы будем конвертировать набор выдаваемых записей базы данных в XML. На стороне клиента мы будем использовать XMLHTTP для того, чтобы отсылать серверу запросы через заданные промежутки времени и методы XML DOM для обновления страницы.
Помните, в самом начале статьи мы говорили о некоторых нюансах в применении AJAX? Для получения максимальной отдачи от использования AJAX вы должны сосредоточиться на эффективности своих приложений. Старайтесь не просто обновлять ту или иную часть страницы, но также стремитесь к минимизации порождаемого этими действиями трафика. Для примера возьмем некую страницу размером 10 килобайт. Если вы будете постоянно выводить на нее некоторые данные, например, биржевые сводки, обновляя всю страницу, это создает трафик объемом 60 килобайт в минуту, 3600 килобайт в час и так далее. Используя AJAX, вы запрашиваете у сервера только изменяющиеся данные, размер которых в случае наших определений из словаря составляет всего около 1 килобайта.
Перед тем, как устраивать праздник по поводу сэкономленного трафика, убедитесь, что вы не растратили этот подарок попусту. Не убивайте трафик на эти ОгромныеИменаЭлементовКоторыеТолькоМестоЗанимают. Ниже приведен пример кода XML, который призван продемонстрировать, с позволения сказать, «определения» XML, использованные на рассматриваемой странице. Я сэкономил место, используя имена элементов и атрибутов, состоящие из одной буквы, а также помещая данные в атрибуты каждого элемента. Назначение этого кода – перенос данных в рамках одного приложения, а не между разными приложениями, поэтому здесь такой подход оправдан. Если бы эти данные предназначались для внешнего использования, я бы тоже примкнул к лагерю сторонников синтаксиса с хорошим описанием его конструкций.
<t> <r t="PELL-MELL" d="Tumultuously, helter skelter, jumbled together."> <r t="LURRIES" d="Money, watches, rings, or other moveablcs."> <r t="SNEAKING BUDGE" d="One that robs alone."> <r t="DEVIL'S DAUGHTER'S PORTION:" d="Deal, Dover, and Harwich, The Devil gave with his daughter in marriage; And, by a codicil to his will, He added Helvoet and the Brill; a saying occasioned by the shameful impositions practised by the inhabitants of those places, on sailors and travellers"> <r t="STAR LAG" d="Breaking shop-windows, and stealing some article thereout."> </t>
Стоит также держать в уме тот факт, что AJAX – это нечто большее, чем просто инструмент для создания каких-нибудь сменяющихся баннеров. Вы можете работать с данными, например, изменяя число возвращаемых записей, частоту обновления или настраивая свою программу. AJAX может стать основой для создания серьезных веб-приложений, гораздо более гибких, чем традиционные программы типа «кликни и обнови».
n8f8, перевод Алексея Кутовенко.
Сетевые решения. Статья была опубликована в номере 10 за 2005 год в рубрике технологии
