Простые примеры использования Ajax

Общий пример

Ниже приведен самый общий пример использования Ajax.

<?php
    # Подключения файла ajax.js в заголовке страницы 
    Router::addToHead($GLOBALS['bloxUrl'].'/style/ajax.js');

    # Кнопка управления
    echo "<span onclick='Blox.ajax(\"templates/src.htm\", \"dst\");'>Заменить</span>";
?>

<?php
    . . .
    # Контейнер назначения
    echo "<div id='dst'>Содержимое по умолчанию</div>";
    . . .
?>

Этот html-код будет вставлен<br />
в элемент <i>dst</i><br />
блока с шаблоном <i>dst.tpl</i>.

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

В таких случаях в качестве источника контента лучше использовать обычный блок, о чем читайте ниже.

Блок, как источник контента

Обратиться можно к любому блоку сайта, даже к блокам на других страницах (кроме скрытых).

<?php
    Router::addToHead($GLOBALS['bloxUrl'].'/style/ajax.js');
    echo "<span onclick='Blox.ajax(\"?block=2\", \"dst\");'>Заменить</span>";
?>

<?php
    . . .
    echo "<div id='dst'>Содержимое по умолчанию</div>";
    . . .
?>

Как использовать блок в качестве источника, читайте в статье Вывод отдельного блока.

Блок, как назначение контента
(содержимое блока заменяется другим блоком)

В приведенном ниже примере содержимое блока 24 заменяется блоком 25.

<?php
    echo "<span onclick='Blox.ajax(\"?block=25\", \"24\");'>Заменить</span>";
?>

<?php
    # Это блок 24
    echo "Содержимое по умолчанию";
?>

<?php
    $params['ajax'] = true;
?>

Чтобы назначением сделать весь блок, нужно: в дескриптор шаблона добавить параметр $params['ajax']=true;; во втором аргументе функции Blox.ajax() указать номер блока, а не id.

Когда в дескрипторе шаблона объявлен параметр $params['ajax'], блок при выводе автоматически помещается в контейнер вида <div id='BloxAjaxDstBlock24'>...</div>, где, 24 - номер блока. То есть, специально создавать элемент назначения не требуется. Не требуется также специально инициализировать функцию Blox.ajax(), это будет сделано автоматически.

Обновление блока (источник и назначение совпадают)

Наиболее простой и одновременно наиболее полезный пример применения Ajax в системе Blox CMS демонстрирует следующий код:

<?php
    echo "
    <span onclick='Blox.ajax(\"?block=$block&sort[1]\");'>Сортировать</span>
    ";
?>

<?php
    $types[1] = 'varchar(255)';
    $params['ajax'] = true;
?>

Как Вы, наверное, заменили, у функции Blox.ajax() здесь используется только один аргумент, который является обычным запросом к блоку.

Одновременное обновление нескольких блоков

<?php echo "
    <span
    onclick='Blox.ajax(\"?block=2&sort[1]\"); Blox.ajax(\"?block=3&pick[1]=Иванов\")'
    >Кликни</span>
"; ?>

<?php
    $types[1] = 'varchar(255)';
    $params['ajax'] = true;
?>

<?php
    $types[1] = 'varchar(255)';
    $params['ajax'] = true;
?>

Примечания

• Во всех примерах управляющим элементов служит тег <span>, в стиль которого необходимо добавить свойства курсора. Впрочем, на практике используется другой код, приведенный в следующей статье – там используется тег <a>.