CB's blog

Я продолжаю цикл заметок, посвященных AJAX. Удаление строк из таблиц – это простой и удобный способ “прикручивания” аякса к любому сайту, где есть таблицы, генерируемые из БД. А это в свою очередь сказывается на удобстве интерфейса и особенно на скорости его работы. Вторая часть – AJAX – расскажет как реализовать удаление строк из базы данных.

AJAX как технология появилась довольно давно. Многие разработчики долго присматриваются, прежде чем начать ее активно внедрять в свои проекты. Одна из проблем, с которой они сталкиваются – иллюзия сложности технологии вместе с нежеланием разбариться. Это в свою очередь приводить к использованию готовых библиотек, где сама технология какбы скрыта, а разработчик взаимодействует с оболочкой, способной в теории решать какие-то типичные задачи. Я же попробую рассказать о реализации с чистого листа и надеюсь что это кому-то поможет в понимании этой замечательной технологии.

Прежде всего, я рекомендую ознакомиться с очень известной статьи Rasmus’ 30 second AJAX Tutorial, перевод можно найти тут. Уверен, что уже после того как вы их прочитаете, сразу возникнет желание что-то реализовать и самому. Давайте этим и займемся. Я предполагаю, что вы ознакомились с моей предыдущей заметкой JavaScript - удаление строк из таблиц. Часть 1 – клиентская. А теперь – продолжение.

Прежде всего, я создал отдельный файл ajax.js, в который вынес все блоки кода, используемые во всех моих проектах с аяксом, не зависящие от конкретного проекта. Этот файл можно скачать здесь. Содержание файла во многом содрано с заметки Расмуса, немножечко переосмысленной мной, и добавлена функция удаления строк из таблицы с предыдущей статьи.

Теперь представим, что мы делаем какое-то рабочее место для какого-то админа. Реализуем функцию удаления, например, пользователей. Как и в предыдущей статье, помещаем таблицу в форму, но теперь на сабмит вешаем не удаление строк, а удаление пользователей (эту функцию напишем потом):

<form action="" method="post"
      onsubmit="delusers();return false;">

Таблице присваиваем id="t_users"

Далее нужно к нашему файлу подключить ajax.js и специфический файл users.js. Вот примерное его содержание:

function delUsers()
{
    var r = genDelUsersRequest();
    sndReq(r, handleDelUsersResponse);
}

function genDelUsersRequest()
{
    var arr_del_me = d.getElementsByName('del_me[]');
    var len = arr_del_me.length;
    var res = "del.php?seed="+Math.round(100*Math.random()) + "&table=users&key=id_user";

    for(var i=0; i<len; i++)
        if(arr_del_me[i].checked)
            res += "&del_me[]="+arr_del_me[i].value;

    return encodeURI(res);
}

function handleDelUsersResponse()
{
    if(http.readyState == 4)
    {
        var t = http.responseText;
        var p = t.indexOf("QueryOk");

        if(p!=-1)
            DeleteRows('t_users');
        else
            alert("Error");
	}
}

genDelUsersRequest – функция, генерирующая GET запрос к серверу. Для того, чтобы передать GET запросом массив (например arr), нужно просто написать arr=<1-й елемент>&arr=<2-й елемент> и т. д.

Я использую Math.round(100*Math.random()) для того чтобы некоторые браузеры (IE) не кешировали запросы. В данном случае это не было необходимостью, однако этот прием следует запомнить.

Еще в запросе указывается имя таблицы БД и ключ, по которому производится удаление. Это может сделать наши скрипты более универсальными, но с точки зрения безопасности следует хорошо подумать.

Теперь сторона сервера. Запрос обращается к скрипту del.php. Вот его содержание:

<?php
// Подключаемся к БД

$del_me = $_GET['del_me'];
$table = $_GET['table'];
$key = $_GET['key'];

if(isset($del_me) && count($del_me)>0 && isset($table) && $table!='' && isset($key) && $key!='')
    foreach($del_me as $id_del)
        $db->query("DELETE FROM $table WHERE $key='$id_del'");

echo "QueryOk";
?>

handleDelUsersResponse – функция, которая вызывается после выполнения запроса. Если запрос успешен (в данном случае, если он содержит фразу "QueryOk";), производится клиентское удаление строк из HTML табдицы.

Вот и все. Готов выслушать критику.