Главная
Новости
Статьи
Скрипты
Плагины
Сервисы

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

Делаем голосование (+/-) на 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

Автор: Spryt




1 Star2 Stars3 Stars4 Stars5 Stars (46 votes, average: 4,17 out of 5)
Loading...

8 комментариев на “Делаем голосование (+/-) на AJAX”

  1. Gurylyov

    В демо я нажал плюс и прибавилось 5, нажал минус — стало 9. Странности какие-то.

  2. Spryt

    В демо рандом. В живую пример можно посмотреть, к примеру, на сайте feedbang.ru (только там блокировка только один голос от человека учитывается)

  3. Gurylyov

    Я-то понимаю, что в демо. Но может стоит сделать более презентабельное? Ибо в итоге не рандом получается же…

  4. ИТ аудит

    Вообщем-то, это обучающая статья по использованию технологии AJAX, а не математического алгоритма голосования. Как пример кода, вполне.

  5. greka16

    Подскажите пожалуйста как избавится от кеширования??
    По примеру сделал свой первый AJAX Скрипт, и не Знаю что куда дописывать((!
    Если можно, поподробнее и самый верный способ.

  6. greka16

    Уже Разобрался!!!
    Спасибо))!
    Просто не выводило результат! Я не до конца поменял исходники((!

  7. nokados

    как через jquery будет выглядеть?

  8. Masha

    Спасибо, наконец-то разобралась.!!))

Оставить комментарий







Авторам:

Популярные статьи:

Web-просмотрщик картинок. Lightbox2 (14)
AJAX скрипт для определения Google Pagerank (13)
Карта кликов вашего сайта. ClickHeat (13)
Анимация загрузки: AjaxLoad (13)
Чекбокс с прозрачностью (10)