Библиотека Интернет Индустрии I2R.ru

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

SSI на стороне клиента

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

Как это делается? Разумеется, современные принципы работы браузеров не поволяют написать в странице инструкции типа SSI, обрабатываемые клиентом. А что может исполняться на клиенте? Правильно, Javascript. Метод document.write() скоро начнут проходить в первом классе, так что создавать HTML-код из скрипта мы умеем. Дело за малым: написать скрипт, который печатает шапку и сохранить его в файле shapka.js, который на радость всем клиентам прекрасно кэшируется.

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

SRC и его применения

Описанный выше «client-SSI» - по сути, один из случаев использования возможностей атрибута src. Фактически у него существует масса применений, некоторые из которых даже не воспринимаются как нечто особенное. Например, все счетчики и рейтинги, а также хакеры, пользуются тем, что тег <IMG> - не просто картинка, а объект, имеющий «источник». Особенно широкие горизонты раскрывает возможность динамического изменения src.

Первое и самое простое - это rollover. Возможность изменения картинки при наведении на нее курсора поражает каждого начинающего дизайнера, и уже никогда он не сможет от нее отказаться. Представить сайт без rollover'ов практически невозможно.

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

Обмен информацией без перезагрузки страницы

Этот параграф основан на статье Exchanging information with a server without reloading your HTML page (автор - Tong Li) с сайта IBM DeveloperWorks. Разумеется, с некоторыми дополнениями и изменениями.

Часто возникает желание передать какую-то информацию на сервер, минимизируя объем возвращаемой информации. Существуют два случая: когда нам вообще не надо ничего получать с сервера, и когда какой-то отклик все же нужен. В первом случае прекрасно подходит картинка нулевого размера, src которой является URL-ом вызываемого скрипта. При нажатии кнопки (или какой-то иной инициализации действия) Javascript на клиенте формирует строку запроса и приравнивает ей src картинки-исполнителя. Серьезным минусом является то, что мы ограничены GET-методом, поэтому объем запроса ограничен двумя килобайтами. Да, можно написать функцию, которая разрежет большой запрос на кусочки и отправит их по отдельности, но удобства такая необходимость определенно не добавляет.

Во втором случае тоже применяется изменение src, и, соответственно, остается ограничение GET-запроса, но в качестве рабочего инструмента используется <IFRAME>. В самом деле, зачем перегружать целую страницу, если можно сделать все в маленьком окошке (в зависимости от ситуации можно сделать его и вовсе нулевым, а результат разбирать скриптом).

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

Сокровищница HTTP

Как общается браузер с сервером? Говоря попросту, клиент шлет запрос, сервер возвращает ответ. Что нам сейчас интересно, так это статус возврата в HTTP-заголовке. Такие статусы, как 404 и 403 знакомы, думаю всем. А вот код 204 не так широко известен. Он имеет описание No Content, и при получении такого кода браузер не должен ничего делать, то есть перезагрузки страницы не произойдет. На первый взгляд может показаться, что таким образом мы не можем получить никакого ответа от сервера, и потому невозможно узнать, выполнился скрипт или нет, не произошла ли какая-то ошибка. Но это неверно: в случае ошибки просто не надо посылать этот код возврата, а вернуть вместо него сообщение об ошибке или что-то еще. Обратите внимание, что сейчас мы не ограничиваем себя методом GET, и потому отправить на сервер большую и сложную форму можно без малейших сложностей.

Такой прием хорош, например, для «голосовалок». Вместо того, чтобы отсылать клиенту страницу с тысячей баннеров и словами «все нормально», можно сообщить ему об успехе простым alert'ом. Также можно сделать регистрацию на такой технике, если нет необходимости изменять внешний вид страницы для зарегистрированного пользователя. Можно придумать еще много различных применений этому коду.

А можно почитать документацию и найти еще что-нибудь интересное.

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