Я убежден, что пользователи избалованные GUI настольных приложений частенько находят интерфейсы веб-приложений крайне неудобными. Их, возможно, невысказанные замечания особенно уместны в эпоху AJAX. Более того, сделать веб-приложения более комфортными не так уж сложно. Я не стану в этой обзорной статье описывать все многообразие интерфейсных форм, но остановлюсь на таком не заменимом элементе как грид. Почти каждое веб-приложение нуждается в управлении списком линейных данных. Управление записями БД в PhpMyAdmin пожалуй является классическим решением в данной области. Это популярное решение, но и в нем при каждой операции требуется перегрузка страницы, возможна потеря параметров и т.д, что неудобно. Давайте подумаем, каковы требования удобного интерфейса. Пользователь должен иметь возможность сортировки списка по полям, фильтрации списка, возможность задавать диапазон выборки и постраничную навигацию. При всем при этом должна быть задействована только та часть окна, которая была подвержена изменениям.

Как вы возможно уже знаете, основа AJAX – это XMLHttpRequest. Это инструмент Java Script позволяющий выполнять запросы к удаленному серверному скрипту и получать его ответы. Таким образом, при инициации пользователем некоторого события (скажем, нажатия на пиктограмму) мы можем тот час же сообщить о его намерении серверному скрипту. Скрипт получает запрос и выясняет из переданных параметров, что ему требуется вернуть, например, отсортированный по указанному признаку список записей. Java Script получает список и добросовестно отображается его в области таблицы. Пользователь с удовольствием наблюдает, как в ответ на его действие поменялся порядок строк в таблице, однако все прочие формы рабочего окна остались неизменными.

Как это реализовать? Использование XMLHttpRequest не является сложной задачей. Впрочем, даже ее можно упростить, взяв на вооружение готовую библиотеку. Мне понравилось решение из набора YUI (http://developer.yahoo.com/yui/) именуемое Connector. С помощью незамысловатой конструкции YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData); мы можем отправить POST-посылку по заданному адресу и распорядиться ответом удаленного скрипта посредством функции, назначенной в callback.

Итак, мы описываем интерфейс будущего грида в HTML. Области, зависимые от ответов серверного скрипта (список записей, индикатор числа записей списка) пропускаем, но оставляем «маячки», так что бы мы могли интерактивно управлять содержанием этих областей. Это может быть любой HTML-контейнер с заданным уникальным ID. Далее описываем функции обработки ответов сервера. Например,

var handleSuccess = function(o){
if(o.responseText !== undefined){
document.getElementById(divName).innerHTML = decorateList(o.responseText);
}
};

var handleFailure = function(o){
if(o.responseText !== undefined){
document.getElementById(divName).innerHTML = 'Server Error';

}
};

var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};

Кто-нибудь наверняка сейчас задумался «Но что же мы получаем от сервера?». Мы получаем содержание консоли серверного скрипта. В самом простом случае это будет

HTML обновленной таблицы. Но это подразумевает смешанные данные и их оформление. Т.е. любое изменение оформления таблицы потребует изменения серверного скрипта, что сделает плохо скажется на «читабельности» бизнес-логики приложения. Классическое универсальное решение для передачи структур данных XML. В этом случае мы должны будем анализировать в Java Script интерфейса переданный скриптом XML и формировать на его основе HTML или же поручить оформление XSLT. Об этом можно почитать в статье AJAX:Getting started (http://developer.mozilla.org/en/docs/AJAX:Getting_Started). Но я предлагаю использовать иной более удобный формат данных JSON (http://en.wikipedia.org/wiki/JSON). При таком подходе мы будем оперировать меньшим объемом данных, мы не будем иметь проблемы со специальными символами и нам не потребуется анализировать XML ответов серверного скрипта. JSON для Java Script – готовая к использованию структура данных.

Таким образом, нам осталось лишь определить набор параметров для различных событий и написать их обработку в серверном скрипте. Допустим при нажатии кнопки «Показать» мы передаем в серверному скрипту, взятые из полей типа INPUT TEXT номер первой записи списка (offset) и число отображаемых записей (total). Серверный скрипт подставляет эти значения в SQL запрос и оформляет запрошенный список записей в JSON. На клиентской стороне нам остается лишь «пробежаться» по массив полученных данных и оформить их в таблицу.

Как вы понимаете, нам открываются новые возможности. Мы можем заставить Java Script на клиентской стороне в случае проблемной связи с сервером автоматически повторять запросы вплоть до успешного ответа. Мы можем реализовать адекватную индикацию этого процесса «данные передаются/данные успешно переданы». Мы можем сделать фильтры более интерактивными так, чтобы при наборе каждого символа список выстраивался ревалентно уже набранной части ключа фильтрации. Впрочем, мы можем ровно столько насколько хватит нашей фантазии.

Вы можете загрузить архив со скриптами готового примера (http://www.phpclasses.org/browse/package/3481.html ), описанного здесь грида.