Делаем голосование (+/-) на AJAX »

Главная → Статьи:

Делаем голосование (+/-) на AJAX

vote

Суть использования AJAX заключается в передаче данных на сервер без перезагрузки страницы - что очень удобно для пользователей. Сегодня мы напишем простейший пример использования этого в виде digg-like голосования, без использования js-фреймворков (библиотек типа jQuery или MooTools). Это теоретическая статья для желающих ознакомиться с технологией AJAX, для прикладного использования существуют готовые скрипты и плагины.

Структура такова: на странице есть множество объектов с уникальным id (например, список постов). Для каждого из них нужно показать текущее количество голосов, а так же ссылки для голосвания за или против. При голосовании на сервер отправляется информация об id и типе голоса, данные добавляются в базу, высчитывается новый рейтинг и данные отправляются обратно на страницу, обновляя рейтинг (естественно, без перезагрузки страницы).

Начнем с основной функцией, реализующей асинхронную передачу данных (в разных источниках она выглдяит по разному и не всегда работает):


function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

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

HTML-код, 17 - идентификатор объекта:

<div>
<a href="#" onclick="vote('rulez','17')">плюс</a>
<div id=votestatus17> 0 </div>
<a href="#" onclick="vote('sux','17')">минус</a>
</div>

Две ссылки для голосвания, хотя можно реализовать их как угодно - кнопками, картинками, главное сделать вызов нашей js-функции. В блоке votestatus[id] отображается текущий рейтинг и впоследствии обновленный (а так же статус загрузки).

А вот и основная функция, реализующая голосование:


function vote(type,id){
var req = getXmlHttp()  

req.onreadystatechange = function() {
	if (req.readyState == 4) {
	if(req.status == 200) {
document.getElementById('votestatus'  + id).innerHTML = req.responseText;
	}
	}

	}

req.open('GET', 'vote.php?type='+type+'&id=' + id, true);
req.send(null);
document.getElementById('votestatus'  + id).innerHTML = 'загрузка...';
}

Читаем код с конца Как только функция вызывается, на место текущего рейтинга помещается заглушка (можно вставить gif-картинку к примеру). Данные отправляются скрипту vote.php через GET параметры, а как только запрос выполнится - отправляет на страницу возвращенный скриптом ответ.

Сам скрипт vote.php индивидуален, но к примеру он может быть таким:


<?
$type=$_GET['type'];
$id=$_GET['id'];

/*
//Обновляем рейтинг в базе
if($type=="rulez") mysql_query("UPDATE posts SET votes=votes+1 WHERE id='$id'");
if($type=="sux") mysql_query("UPDATE posts SET votes=votes-1 WHERE id='$id'");

//Получаем новый рейтинг и выводим его
$row=mysql_fetch_array(mysql_query("SELECT votes FROM posts WHERE id='$id'"));
echo $row['votes'];
*/

//А чтобы тестовый пример работал
echo rand(1,10);
?>

Естественно, сюда стоит добавить защиту от накрутки (по IP), красиво оформить кнопки голосования, блокировать (или просто скрывать) их после нажатия и т.д., но это выходит за рамки статьи.

Демо

Вот в принципе и всё

Автор: Андрей «Spryt» Гиацинтов, специально для сайта AllAJAX.ru