Суть использования 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), красиво оформить кнопки голосования, блокировать (или просто скрывать) их после нажатия и т.д., но это выходит за рамки статьи.

Демо

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

Допустим, у нас есть блок данных, который нужно показать только по клику по ссылке:

<div id="hidden_content" style="display: none;">скрытый контент</div>

Первый способ: jQuery
Очень простой и функциональный способ, однако придется подключать дополнительную библиотеку.

<a onclick="$('div#hidden_content').slideToggle('slow')">Показать/Скрыть блок</a>

В настройках можно указать скорость появления блока (slow/fast). Повторный клик скрывает блок.

Подробнее можно прочитать в документации jQuery (кликов:415).

Второй способ: чистый JavaScript
Занимает меньше места, однако не так функционален.
<script language="javascript" type="text/javascript">
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>


И непосредственно сама ссылка:

<a onclick="toggle(hidden_content)">Показать/Скрыть блок</a>

Использовать можно любой способ, хотя второй более грубый и непредсказуемый.

Не совсем AJAX конечно (разве что посмотреть реализацию - хотя она в основном на чистом js), однако для вебмастеров весьма полезный сервис.

PS. У сайта остались живые читатели? FB показывает около 100, но доверия не вызывает. Постараюсь возродить сайт полезными скриптами и статьями, в том числе своими, а так же сервисами более широкого назначения. Хотя редактор не помешает - если готовы заняться наполнением сайта, отпишитесь на me@spryt.ru.

• сервер с LAMP в состав которого входит PHP не ниже чем 5.2.9,  а лучше PHP 5.3.5 собранный с поддержкой mysqlnd;
• браузер с поддержкой JavaScript;
• актуальная версия w framewor'a;

Требования: jQuery
Демо: jqueryglobe.com → Slide Thumbs
Документация, how-to
Скачать (343кб)

Система организована на технологиях

Php, mySQL, Smarty, Jquery, Html, Css.

Возможности

1. Неограниченное добавление страниц

2. Новости

3. Rss лента новостей

4. Фотогалерея

5. Статьи

6. Faq

7. Комментарии

8. Ротатор рекламы

9. Обратная связь

Адрес сайта: lati.itlati.com

Адрес админ панели: lati.itlati.com/admin/

Логин и пароль: admin

Насколько мне известно файловые менеджеры для сайтов еще не обсуждались. Пользуясь случаем хочу представить вам файловый менеджер под названием RELAY, данный скрипт был написан на PHP под MySQL , так же был использован PERL для динамического отображения процесса загрузки. Особенности скрипта:

* AJAX Drag&Drop
* Предпросмотр картинок
* Предпросмотр PDF документов
* Работа с директориями(создать, удалить, переместить, переименовать)
* Виртуальные директории
* Добавление пользователей
* Поиск
* Корзина
* Отправка файлов через емейл
* Скачать файлы как архив

* Теперь еще и на русском языке !!!!

Скачать

Мибью Веб Мессенджер (ранее Open Веб Мессенджер) это бесплатное open-source приложение для онлайн-консультирования. Оно позволяет добавить на сайт кнопку прямой связи с вашими операторами, при этом все общение происходит прямо в браузере.

Помимо всех вкусностей есть поддержка русского и небольшая прога под винду аля ICQ.

Прекрасный скрипт онлайн консультации! Всем рекомендую!!!

Сайт скрипта: http://mibew.org/ru/

Отличный текстовый редактор для написания постов. Аналог ворда для редактирования веб страниц Позволяет создавать сложную HTML разметку простыми нажатием на кнопки, но есть и режим редактирования исходного кода (кому как удобней). Отлично подходит для создания и редактирования текстовых материалов на сайте - его часто можно встретить в CMS. Поддерживаются различные настройки - язык, скины, управление тулбарами и т.д. Это один из самых популярных WYSIWYG редакторов для веб приложений (раньше назывался FCKeditor).

Демо: http://ckeditor.com/demo
Скачать: http://ckeditor.com/download (1.3/1.9 мб)

---------------------
PS. Да, сайт начинает потихоньку возрождаться Напомню, что регистрация открыта, и любой желающий может добавить свой материал на сайт. Так же не помешал бы постоянный редактор, который будет регулярно искать и добавлять новые материалы на сайт, за соответствующую плату. Если вам это интересно это предложение - пишите на me@spryt.ru.

Система организована на технологиях
Php, mySQL, Smarty, Jquery, Html, Css.

Возможности
1. Неограниченное добавление страниц

2. Новости
3. Rss лента новостей
4. Мультиязычность
5. Статьи
6. Faq
7. Обратная связь

Адрес сайта: cms-lang.itlati.com
Адрес админ панели: cms-lang.itlati.com/admin/
Логин и пароль: admin