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

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); там около десяти тысяч скриптов на самые разные темы.

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

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

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

Неужто AJAX способен избавить веб-интерфейсы от извечной заторможенности? Что ж, популярные Google-сервисы показали, что приложения в Сети способны работать гораздо проворнее, чем привыкли ожидать терпеливые пользователи.

Вернемся к технической начинке «нового веба». Браузер получает в свое распоряжение XML-файл. Далее на арену выходят еще два игрока - JavaScript и XMLHttpRequest. Первый из них выступает в роли распорядителя, а второй отвечает за получение информации с сервера.

XMLHttpRequest играет немалую роль в рождении «чуда». Именно он позволяет тихонько отправлять асинхронные запросы серверу через протокол HTTP и столь же незаметно получать всю необходимую информацию в виде XML[Строго говоря, могут использоваться и другие форматы - например, plaintext].

Скажем, вы пытаетесь ввести какое-то слово в окошко поиска на Google Suggest. С помощью XMLHttpRequest браузер отправляет запрос на сервер и ожидает ответа. Сервер присылает необходимые данные в виде XML. Расторопный JavaScript разбирает полученные данные и заботливо заворачивает их в HTML-теги. Момент… и ниже окна поиска отобразилось несколько полезных «подсказок».

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