Stranger than Fiction

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

AJAX (Asynchronous JavaScript and XML) — подход к построению пользовательских интерфейсов веб-приложений, когда web-страница, не перезагружаясь, сама догружает нужные пользователю данные.

Итак, приступим!

Реквизит

В дополнение к уже имеющемуся добавляется библиотека работы с Ajax-запросами на базе Rico.

Источники данных

В этом примере источниками данных для нас будут являться обычные текстовые файлы, но как вы понимаете, в качестве источников могут выступать и базы данных и результаты работы различных прграмм и скриптов.

Итак, наши источники данных:

• about.txt
• kostya.txt
• tair.txt
• anton.txt
• andrei.txt
• dima.txt

Пример 1 — страница с вынесенной во внешние источники данных информацией.

За работу берётся PHP

Создаём простой PHP-скрипт, который выводит информацию из наших источников данных:

<?php
    $data_source = $_GET['pane'] . '.txt';
    if (file_exists($data_source)) {
        include $data_source;
    } else {
        echo 'Wrong data source!';
    }
?>

Пример для панели “О группе”.

Понимание — ключ к успеху!

Сейчас нам предстоит разобраться, как усторен механизм запросов и откликов Ajax-библиотеки на базе Rico.

Следующая диаграмма даёт общее представление о механизмах библиотеки:

Детали

В качестве обработчика отклика мы будем регистрировать HTML-элемент (забегая вперёд скажу, что им будет контейнер с идентификатором content), именно его содержимое будет перезаписано в результате выполнения запросов.

Требования к Ajax-отклику следующие:

• Отклик представляет собой XML данные
• Корневым элементом для отклика является элемент ajax-response
• Непосредственно сами возвращаемые данные находятся в контейнерах response (откликов может быть больше, чем один)

Таким образом, нам придётся несколько видоизменить наш PHP-скрипт, читающий данные из внешних источников, в соответствии с перечисленными выше требованиями. А именно, нам потребуется выдавать корректный HTTP-заголовок для XML-документов, а так же добавить XML PI (Processing Instructions) и необходимые контейнеры:

<?php
    header("Content-Type: text/xml");
    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
    echo "<ajax-response>\n";
    echo "  <response>\n";

    $data_source = $_GET['pane'] . '.txt';
    if (file_exists($data_source)) {
        include $data_source;
    } else {
        echo 'Wrong data source!';
    }

    echo "  </response>\n";
    echo "</ajax-response>";
?>

Контейнер response

Как уже говорилось ранее, контейнер responce содержит непосредственное тело отклика, при чём таких контейнеров может быть и несколько.

Контейнер response обладает следующими атрибутами:

• type — “element” или “object”
• id — идентификатор HTML-элемента или объекта JavaScript

Таким образом, нам необходимо добавить эти атрибуты в скрипт отклика:

...

    echo "  <response type=\"element\" id=\"content\">\n";

...

Наш скрипт отклика готов.

Сборка

Вернёмся к нашему HTML-файлу. Добавим ссылку на библиотеку работы с Ajax:

<script type="text/javascript" src="ajax.js"></script>

В уже имеющуюся у нас функцию switchTab нам нужно добавить новую функциональность:

1. Зарегистрировать запрос
2. Зарегистрировать элемент, в который будет записываться откликик
3. Непосредственно выполнить запрос

Регистрация запроса осуществляется при помощи метода ajaxEngine.registerRequest(<em>имя_запроса</em>, <em>URL_запроса</em>):

ajaxEngine.registerRequest('showPane', 'show_pane.php');

Метод ajaxEngine.registerAjaxElement(<em>ID_элемента</em>) регистрирует элемент-контейнер для отклика:

ajaxEngine.registerAjaxElement('content');

Запрос осуществляется методом ajaxEngine.sendRequest(<em>имя_запроса</em>, <em>аргумент1=значение1</em>, <em>аргумент2=значение2</em>...<em>аргументN=значениеN</em>):

ajaxEngine.sendRequest('showPane', 'pane='+p);

Пример 2 — загрузка данных из внешних источников.

Заметили, что при загрузке таб “О группе” пуст? Он заполняется только при нажатиии на него. Написав небольшую функцию и добавив её в атрибут onload тэга body испрваляем этот недостаток — Пример 3.

Добавляем эффекты. Готово! Пример 4.