Журнал Компьютерра - Журнал «Компьютерра» №32 от 06 сентября 2005 года

Многим пользователям Сети уже довелось познакомиться с сервисом Google Suggest. Тем, кто этого еще не сделал, настоятельно рекомендую[Последняя «бета» живет здесь]. Это не только наглядная демонстрация возможностей AJAX, но и действительно полезная штука. На первый взгляд - ничего необычного. В поле для поиска вводится ключевое слово. Мгновение - и Google предложит вам несколько вариантов поисковых запросов, а также статистику по ним. Создается впечатление, что поисковик в буквальном смысле реагирует на каждое нажатие клавиши. Попробуйте немного изменить слово - набор подсказок изменится. При этом страница и не думает перезагружаться.

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

Необычные ощущения порождает и работа с почтовым сервисом Gmail. Благодаря щедрости владельцев и всяким дополнительным завлекалочкам, многие российские пользователи доверили ему свою переписку. Фокусы начинаются уже при входе: если ввести неправильный пароль, перезагружается только форма авторизации, а не страница целиком. Наверняка вы заметили, что перемещаться между сообщениями внутри ящика можно очень быстро - дозагружается лишь центральная часть страницы, где выводится новая информация, - в отличие от Mail.ru, HotMail.com и многих других почтовых сервисов, где при просмотре каждого письма пользователя заставляют загружать воз баннеров и трехэтажное меню. Gmail тоже активно использует подход, лежащий в основе «нового веба».

В последнее время идеи AJAX набирают популярность и получают развитие во все новых проектах. В числе «зараженных идеей»: онлайновый сервис фотоальбомов Flickr, проекты Google - Maps и Group, Virtual Earth от Microsoft, почтовый сервис America Online - AIM Mail и многие другие.

Сайт Webmascon посвящен веб-дизайну. Не веб-программированию, а именно концепциям веб-дизайна. Почти все статьи переведены с английского. Как сказано в разделе «О проекте Webmascon», «…цель проекта - донести русскоязычному населению Интернета информацию по веб-дизайну, которая доступна только на английском языке. Более глобальная цель - пропаганда качественного, чистого, культурного и стандартного веб-дизайна». Cейчас на Webmascon’e больше трехсот статей (в месяц появляется от 3 до 10 новых). Да и сам дизайн сайта - очень стильный, его часто приводят в пример, как нужно делать сайты. Статьи делятся на категории: «Информационная структура», «(X)HTML», «Юзабилити», «Реклама и продвижение», «Менеджмент проектов», «Текст и контент», «Проектирование», «Якоб Нильсен», «Тестирование» и многие другие. Проект некоммерческий, все статьи пишутся или переводятся владельцем сайта и его добровольными помощниками.

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

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

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

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

Верхушка айсберга, как можно заметить, полностью лишена чего-либо революционного. Собака по имени AJAX зарыта в связке следующих трех технологий - XML, XSL[См. дальше. Вообще, XSL не является обязательным элементом AJAX. Достойно представить информацию на сайте сумеет и сам JavaScript3] и JavaScript.

XML (eXtensible Markup Language) представляет собой популярный формат хранения и обмена данными. Звучит солидно, на деле же оказывается текстовым файлом, в котором хранится размеченная информация. Предположим, есть желание представить архив публикаций «Компьютерры» в виде XML-файла. Открываем Блокнот и создаем простенькую структуру.

‹?xml version=”1.0” encoding=”ISO-8859-1”?›

‹archive›

‹journal name=”Computerra”/›

‹article›Article 1‹/article›

‹article›Article 2‹/article›

‹article›Article 3‹/article›

‹/archive›

Разумеется, реальные XML-структуры гораздо сложнее. Однако уже в этом простом примере легко заметить существенное отличие XML от HTML. Если создавая веб-страничку, мы ограничены готовым набором элементов, то XML позволяет придумывать собственную структуру данных. На эту структуру не налагается никаких дополнительных ограничений, от пользователя требуется лишь следовать строгим правилам. Легкомысленные вольности вроде незакрытых тегов и перепутанных элементов, которые великодушно «прощает» HTML, в XML не пройдут.

Ради чего привыкать к порядку? Десяток ответов на этот вопрос может привести любой разработчик. С помощью XML можно создать структуру данных, то есть упорядочить информацию определенным образом. После этого, используя один и тот же XML-файл, можно отображать эту информацию по-разному[Например, на витрине интернет-магазина и в корзине покупателя вид товара может отличаться], причем ее сможет использовать не только движок сайта, но и любые другие программы[Тот самый файл с товарами легко доступен из бухгалтерской программы и системы управления складскими запасами].

Еще больше возможностей открывается, если включить в игру XSL (eXtensible Stylesheet Language). Эта технология позволяет развести контент и его представление по разным углам. В файлах XSL содержатся инструкции, как именно показывать страницу. Получив XML-размеченные данные, браузер «заглядывает» в шаблон и демонстрирует веб-страницу пользователю.

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

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

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

Обратите внимание на портал Woweb (www.woweb.ru) - в частности, на два сайта: «Статьи и документация на Woweb» (doc.woweb.ru) и «Скрипты на Woweb» (script.woweb.ru).

На первом вы найдете множество отличных статей на самые разные темы, так или иначе связанные с разработкой веб-сайтов. Одни заголовки разделов чего стоят: «Flash», «Photoshop», «Базы данных», «Apache», «Истории веб-мастеров», «Веб-технологии», «Программирование для Web» и др.

Второй сайт - неистощимый источник скриптов для всего Рунета. Их там тысячи, причем категории самые разные: «PHP», «Perl», «Java-апплеты», «JavaScript», «ASP» и т. д.

В англоязычном Интернете скрипты, написанные на PHP, Perl, Java и ASP, можно найти на ресурсе Hot Scrpits (www.hotscripts.com); там около десяти тысяч скриптов на самые разные темы.

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

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