Скрипт для голосования своими руками на php и mysql с использованием ajax

Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX Скрипт текстовой CAPTCHA для защиты от спам-ботов Основные приемы работы с СУБД MySQL, используя язык программирования PHP(Устарело!)

AJAX и JavaScript. Загрузка контента без перезагрузки страницы AJAX и jQuery. Как загрузить скрипт JavaScript динамически Пример №2. Динамическая загрузка скрипта JavaScript, формируемого из PHP. Пример 3. Отправка данных на сервер в фоновом режиме и получение контента AJAX и jQuery. Динамическое обновление контента. Основы Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery Виджет комментариев ВКонтакте. Добавляем интерактивность на сайт за 10 минут AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX http://www.codething.ru/vote.php (изменения от 03.01.2012)

Автор: Михаил Источник: http://www.codething.ru/vote.php

Пестречихин

Часто на различных сайтах мы видим блоки с опросом общественного мнения. Как сделать подобный скрипт, для проведения голосования на своем сайте, да еще и таким образом, чтобы при выборе нужного пункта страница не перегружалась целиком, а изменялся только блок с опросом и сразу показывал результаты. Об этом и пойдет речь в данной статье. Важно! Для того, чтобы пример работал корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл. Рассмотрим пример. Скачать пример можно здесь, 3,1 Кб

Пример состоит из 5 различных файлов, рассмотрим каждый из них в отдельности.

Файл dbconnect.php Служит для соединения с базой данных, для создания необходимой таблицы и для заполнения её примером нашего голосования.

Работа с базами данных описана в «Основные приемы работы с СУБД MySQL, используя язык программирования PHP».

статье

В нашем случае база данных состоит из одной таблицы с тремя полями: id – идентификатор записи; title – название записи; votes – количество голосов, отданных за эту запись. Первоначально таблица заполняется следующими значениями: id

title

votes

1

Куда вы сегодня пойдете

NULL

2

Никуда

0

3

В кино

0

4

В клуб

0

5

В магазин

0

6

Другое

0

Запись, для которой поле votes имеет значение NULL – считаем названием опроса, которое содержится в поле title.

Файл showcontent.js Содержит в себе AJAX-функцию showContent() для обновления контента без перезагрузки страницы. Подробное описание работы данной функции приведено в статье «AJAX и JavaScript. Загрузка контента без перезагрузки страницы".

Файл functions.php Содержит описание двух функций, применяющихся нами в программе. Функция drawForm() отображает форму для голосования.

1. function drawForm() // отображение формы для голосования 2. { 3.

$r=mysql_query ("SELECT * FROM vote WHERE votes is NULL");

4.

$row=mysql_fetch_array($r);

5.

echo "<p>".$row['title']."</p>";

6.

echo "<form name='vote_form'>";

7.

$r=mysql_query ("SELECT * FROM vote WHERE votes is not NULL");

8.

while ($row=mysql_fetch_array($r))

9.

10.

11.

echo "<input type='radio' name='vote' value='{$row['id']}'> {$row['title']}<br/>"; echo "<br/><input type='button' onclick='showContent(\"vote.php?select=\"

12.

+getRadioGroupValue(document.vote_form.vote));'

13.

value='Проголосовать'>";

14.

echo "</form>";

15. }

Функция drawResults() отображает результаты голосования.

1. function drawResults() // отображение результатов 2. { 3.

$r=mysql_query ("SELECT * FROM vote WHERE votes is NULL");

4.

$row=mysql_fetch_array($r);

5.

echo "<p>".$row['title']."</p>";

6.

$r=mysql_query ("SELECT * FROM vote WHERE votes is not NULL");

7.

while ($row=mysql_fetch_array($r))

8.

echo "{$row['title']}: {$row['votes']}<br/>";

9. }

Данные для построения формы и вывода результатов берутся из базы данных.

Файл index.php Основной файл скрипта голосования. Здесь мы рассмотрим его основную часть. Как мы видим — тело документа состоит из контейнера contentBody. При загрузке этой страницы мы сперва проверяем, было ли уже произведено голосование. Проверку осуществляем через переменную cookie, поскольку это является наиболее простым случаем. Если голосование произведено не было, то мы выводим в контейнер contentBody форму для голосования. Если же пользователь уже голосовал — выводим результаты поиска.

1. <body> 2.

3.

<div id="contentBody">

4.

5.

<?php

6.

7.

if ($_COOKIE['codething_vote']=='1')

8.

9.

?>

12.

13.

14.

drawResults();

// выводим результаты,

drawForm();

// иначе форму для голосования

else

10.

11.

// если уже голосовали, то

</div>

15.

<div id="loading" style="display: none">

16.

Идет загрузка...

17.

</div>

18.

19. </body>

Файл vote.php Программный код этого файла выполняется тогда, когда пользователь производит голосование. В этот момент мы создаем переменную cookie, для того, чтобы исключить повторное голосование, сохраняем результат голосования в базу данных и отображаем результаты.

1. // установка cookie для избежания повторного голосования с одного браузера.

2. setcookie ("codething_vote","1"); 3.

4. // добавление выбранного варианта 5. $select = $_REQUEST['select']; 6. mysql_query ("UPDATE vote SET votes = votes + 1 WHERE id = '$select'"); 7.

8. // отображение результатов 9. drawResults();

Поскольку, выполнение этого файла вызывается через AJAX функцию showContent(), то перезагрузки всей страницы не происходит и результаты выполнения файла помещаются в контейнер contentBody. Улучшения и упрощения принимаются по адресу: studio@pestr.ru

Статьи по теме Основные приемы работы с СУБД MySQL, используя язык программирования PHP; AJAX и JavaScript. Загрузка контента без перезагрузки страницы; AJAX и jQuery. Как загрузить скрипт JavaScript динамически?; AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON; Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery; Скрипт текстовой CAPTCHA для защиты от спам-ботов.

Скрипт текстовой CAPTCHA для защиты от спам-ботов (от 30.07.2012)

Автор: Михаил Источник: http://www.codething.ru/captcha.php

Пестречихин

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

1. Защита от спама в соц.сети "ВКонтакте" . 2. reCAPTCHA. CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) - это полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей. Подробнее можно прочитать в Википедии. Принцип работы CAPTCHA весьма прост. Пользователю демонстрируется задача (искаженная картинка, текст или что-то еще), которую человеческий мозг решает очень быстро и с большой вероятностью правильно. При этом решение такой задачи с помощью средств вычислительной техники либо очень трудоемко, либо сложно поддается алгоритмизации и, как следствие, требует огромных затрат на разработку решающей программы. После демонстрации задачи и получения ответа - ответ сравнивается с оригиналом и в случае его правильности, пользователю разрешается совершить действие - отправить форму с введенными данными на обработку. Спам-роботы же, на этом этапе как правило отсеиваются. В этой статье мы поговорим о создании капчи своими руками, причем капча будет не классической в виде изображения, а текстовой. Принцип работы нашей CAPTCHA будет таким. Капча будет формировать в текущей сессии две переменные: 1. Вопрос в виде арифметического выражения a+b, где 2<=(a+b)<=10; 2. Ответ в виде хэша md5 от результата суммы N+M, записанного прописью, например, md5("четыре").

Делаем предположение о том, что спам-роботы не смогут самостоятельно догадаться о том, что ответ нужно писать прописью. Также ответ прописью они не найдут и в переменных сессии, т.к. он не содержится там в явной форме, а содержится только его хэш. При проверке капчи из ответа пользователя надо будет также получать хэш md5.

Программный код скрипта текстовой CAPTCHA Файл mycaptcha.php, содержащий программный код для генерации вопроса и ответа CAPTCHA. 1. <?php 2.

3.

function GenerateCAPTCHA()

4.

{

5.

$nums = array("1"=>"один", "2"=>"два", "3"=>"три", "4"=>"четыре",

6.

"5"=>"пять", "6"=>"шесть", "7"=>"семь", "8"=>"восемь", "9"=>"девять",

7.

8. "10"=>"десять"); 9.

10.

//

формируем пример a+b

11.

$rez = rand(2,10);

12.

$a = rand(1,$rez-1);

13.

$b = $rez-$a;

14.

15.

// записываем в сессию вопрос a+b

16.

$_SESSION['mycaptcha_text']=$a." + ".$b;

17.

18.

// записываем в сессию хэш ответа прописью

19.

$_SESSION['mycaptcha_string']=md5($nums[$rez]);

20.

}

21.

22. ?>

Файл index.php, содержащий пример обращения и использования нашей CAPTCHA в пользовательской форме 1. <?php 2. session_start();

// запускаем сессию, она важна

3.

// вызываем модуль генерации CAPTCHA

include ("mycaptcha.php");

4.

5.

if (!isset($_REQUEST['string'])) // если пользователь не ввел ответ,

6.

{

// формируем и выдаем ему вопрос

7.

generateCAPTCHA();

8.

echo "<p>Вопрос: ".$_SESSION['mycaptcha_text']."?</p>";

9.

}

10.

else

11.

{

12.

// иначе проверяем правильность ответа пользователя и выдаем результат

if (md5(mb_strtolower(trim($_REQUEST['string']),"utf-8"))

13.

== $_SESSION['mycaptcha_string'])

14.

echo "<p>Верно!</p>";

15.

else

16.

17.

echo "<p>Неверно!</p>"; }

18. ?> 19.

20. <form method="POST"> 21. Введите ответ прописью, например, "четыре":<br/> 22. <input name="string"/> 23. </form>

В условии

1. if (md5(mb_strtolower(trim($_REQUEST['string']),"utf-8")) == $_SESSION['mycaptcha_string']) Перед тем, как получить хэш md5 - убираем излишние пробелы по краям пользовательского ответа (функция trim()) и приводим ответ к нижнему регистру (функция mb_strtolower()). Сложность данного примера можно повысить, изменив строку в файле mycaptcha.php:

1. $_SESSION['mycaptcha_text']=$a." + ".$b; на

1. $_SESSION['mycaptcha_text']=$nums[$a]." + ".$nums[$b]; В таком случае, вопрос a+b будет выводиться также прописью, что затруднит его считывание роботом. Для того, чтобы пример работал корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл. Скачать исходные http://codething.ru/files/captcha.zip

файлы

примера

(2

кб):

Механизм CAPTCHA можно применять для защиты гостевых книг, комментариев, форм обратной связи от спама, а также для защиты форм регистрации от прохождения автоматических регистраций спам-ботами.

Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме Делаем форму обратной связи на сайт с защитой от спама; Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX; Гостевая книга своими руками на PHP и MySQL. Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

Основные приемы работы с СУБД MySQL, используя язык программирования PHP(Устарело!) Автор: Михаил Источник: http://www.codething.ru/phpmysql.php

Пестречихин

Эта статья является устаревшей! Расширение MySQL в PHP считается устаревшим с версии 5.5.0 и перестанет поддерживаться в дальнейшем. Приемы работы с СУБД MySQL через расширение PHP mysqli приведены в новой статье!

В программировании часто возникает задача работы с большими объемами данных. Даже когда структура данных спроектирована, часто не хочется придумывать и реализовывать эффективные способы работы с этими данными, а именно такие, как выбор, изменение, сортировка, хранение. В таких случаях к нам приходит на помощь СУБД, которая берет все эти функции на себя. В нашем случае, в роли СУБД будет выступать MySQL. Функции для работы с СУБД MySQL имеются и в PHP4, и в PHP5. В PHP4 функции работы с MySQL доступны сразу, а для использования этих функций в PHP5 надо убедиться, что в конфигурационном файле php.ini подключено расширение для работы с MySQL, а именно, должна быть активной строчка: 1. extension=php_mysql.dll

Последнюю версию http://www.mysql.com/

MySQL

можно

скачать

с

сайта

разработчика:

В данной статье рассмотрим основные приемы работы с СУБД MySQL, используя язык программирования PHP.

1. Соединение с сервером MySQL и подключение к базе данных Соединиться с сервером СУБД MySQL можно при помощи функции mysql_connect(), которой достаточно передать путь к серверу, имя пользователя и пароль к MySQL. Например, следующий код позволит подключиться к MySQL, находящейся на локальной машине, с именем root и с пустым паролем: 1. mysql_connect("localhost", "root", "");

Далее необходимо выбрать базу данных, с которой будем работать. На сервере MySQL может находиться множество различных баз данных и в каждой базе данных может быть множество таблиц. Если базы данных на сервере еще не создано, её необходимо создать. Для создания базы данных MySQL в PHP рекомендуется использовать следующий код: 1. mysql_query ("CREATE DATABASE IF NOT EXISTS myDataBase");

где myDataBase - это произвольное название создаваемой базы данных. Функция mysql_query() отправляет произвольный запрос в СУБД MySQL, написанный на языке SQL. В нашем случае, мы отправили запрос на создание базы данных.

Для подключения к базе данных используется функция mysql_select_db(), которой необходимо передать название базы данных. Например, 1. mysql_select_db ("myDataBase");

2. Создание таблицы В каждой базе данных MySQL может быть создано множество таблиц. Для примера, создадим таблицу телефонного справочника, в которой будут храниться ФИО абонентов и номера телефонов.

1. mysql_query ("CREATE TABLE IF NOT EXISTS phones (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, ".

2. ."fio VARCHAR(100), phone VARCHAR(50))");

Данный запрос можно прочитать так: если таблица phones не создана, то создаем таблицу phones, с полями: id - идентификатор записи и первичный ключ, fio - текстовое поле, длиной не более 100 символов, phone - текстовое поле, длиной не более 50 символов. В созданную таблицу можно записать произвольное количество записей.

3. Запрос на запись данных Для того, чтобы записать данные в созданную нами таблицу, напишем следующий запрос: 1. mysql_query ("INSERT INTO phones (fio, phone) VALUES ('Пупкин Василий', '123-45-67')");

Этой строкой мы добавили новую запись в базу данных. В поле fio добавили строку 'Пупкин Василий', в поле phone добавили строку '123-45-67'. Поле id заполнилось автоматически. Добавьте еще несколько произвольных записей самостоятельно.

4. Запрос на выборку данных Для того, чтобы выбрать все данные из таблицы phones и распечатать их на экране, напишем следующий программный код: 1. $r=mysql_query ("SELECT * FROM phones");

В переменную $r - попадет результат работы запроса. Для того, чтобы извлечь из него данные их всех записей БД, применим следующий программный код: 1. while ($row=mysql_fetch_array ($r)) 2. echo "ФИО: ".$row['fio'].", телефон: ".$row['phone'];

функция mysql_fetch_array() позволяет работать с одной текущей записью из базы данных, организуя данные из этой строки в виде массива. Так, например, запись из поля fio таблицы попадает в ассоциативный массив $row['fio']. Можно выводить не все записи, а записи удовлетворяющие какому-либо условию, например, если вместо 1. SELECT * FROM phones

написать запрос 1. SELECT * FROM phones WHERE fio LIKE 'П%'

то получим список абонентов, фамилии которых начинаются на букву 'П'. Если написать запрос 1. SELECT * FROM phones ORDER BY fio

то записи будут упорядочены по алфавиту. А если написать запрос 1. SELECT * FROM phones ORDER BY fio DESC

то записи будут упорядочены обратно алфавиту.

5. Запрос на изменение данных Если данные требуют изменения, то можно написать запрос, на изменение данных. Например, следующим запросом заменим в базе данных абонентов телефон '123-45-67', заменим на '765-4321'.

1. mysql_query ("UPDATE phones SET phone='765-43-21' WHERE phone='123-45-67'");

6. Запрос на удаление данных Для того, чтобы удалить данные из таблицы phones, необходимо написать следующий запрос, 1. mysql_query ("DELETE FROM phones");

Такой запрос удалит все данные из таблицы. Скорее всего нам потребуется удалить только данные, удовлетворяющие какому-либо условию, например, удалить все записи, фамилии в которых начинаются на букву 'П'. Для этого напишем так: 1. mysql_query ("DELETE FROM phones WHERE fio LIKE 'П%'");

7. Запрос на удаление таблицы Удалить таблицу phones из базы данных MySQL при помощи PHP можно следующим запросом: 1. mysql_query ("DROP TABLE phones");

8. Запрос на удаление базы данных Удалить базу данных MySQL можно следующим запросом: 1. mysql_query ("DROP DATABASE myDataBase");

phpmysql.zip пример программы для работы с MySQL, http://www.mysql.com/ сайт разработчиков http://www.mysql.ru/ - русский сайт поддержки СУБД MySQL.

Хотите дополнить материал? - Пишите нам: studio@pestr.ru

используя СУБД

язык

PHP MySQL;

AJAX и JavaScript. Загрузка контента без перезагрузки страницы

(изменения от

03.01.2012)

Автор: Михаил Источник: http://www.codething.ru/ajax_js.php

Пестречихин

В данной статье речь пойдет о том, как сделать обновление контента без перезагрузки страницы, используя только JavaScript.

AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы. Важно! Для того, чтобы пример работал корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Простой пример программного кода на AJAX и JavaScript Программа загружает на странице контент по выбору пользователя, без перезагрузки всей страницы полностью. Содержимое файла index.html.

1. <html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> 4. <script> 5.

function showContent(link) {

6.

7.

var cont = document.getElementById('contentBody');

8.

var loading = document.getElementById('loading');

9.

10.

cont.innerHTML = loading.innerHTML;

11.

12.

var http = createRequestObject();

13.

if( http )

14.

{

15.

http.open('get', link);

16.

http.onreadystatechange = function ()

17.

{

18.

if(http.readyState == 4)

19.

{

20.

cont.innerHTML = http.responseText;

21.

}

22.

}

23.

http.send(null);

24.

}

25.

else

26.

{

27.

document.location = link;

28.

29.

} }

30.

31.

// создание ajax объекта

32.

function createRequestObject()

33.

{

34.

try { return new XMLHttpRequest() }

35.

catch(e)

36.

{

37.

try { return new ActiveXObject('Msxml2.XMLHTTP') }

38.

catch(e)

39.

{

40.

try { return new ActiveXObject('Microsoft.XMLHTTP') }

41.

catch(e) { return null; }

42.

}

43.

44.

} }

45. </script> 46. </head> 47.

48. <body> 49.

50.

<p>Какую страницу желаете открыть?</p>

51.

52.

<form>

53.

<input onclick="showContent('page1.html')" type="button" value="Страница 1">

54.

<input onclick="showContent('page2.html')" type="button" value="Страница 2">

55.

</form>

56.

57.

<div id="contentBody">

58.

</div>

59.

60.

<div id="loading" style="display: none">

61.

Идет загрузка...

62.

</div>

63.

64. </body> 65. </html>

Рассмотрим принцип работы примера.

1. Функция createRequestObject() создает объект XMLHttpRequest() для браузеров Firefox, Opera и т.п. и его аналог для различных версий браузеров Internet Explorer. Этот объект нужен для передачи данных на сервер и получения от него ответа в фоновом режиме, без перезагрузки страницы.

2. Как видно в теле документа имеются два контейнера - contentBody и loading. В контейнер contentBody загружается непосредственно контент, а контейнер loading содержит контент, который служет заставкой и появляется на время загрузки основного требуемого контента.

3. Функция showContent() выводит контент в основной контейнер contentBody. Делает она это с использованием объекта XMLHttpRequest(). Методом open() осуществляется описание передачи данных на сервер. В качестве параметров указавается тип запроса (у нас - GET) и строка, передаваемая серверу (у нас - URL загружаемой страницы).

4. В силу особенностей объекта XMLHttpRequest(), для получения всего контента требуется дождаться, пока свойство readyState примет значение 4. Как только мы дожидаемся этого - сразу изменяем тело контейнера. Это и указано в функции-обработчике события onreadystatechenge().

5. После открытия запроса его надо отправить на сервер, это делается методом send().

6. Если создать объект XMLHttpRequest() по каким-либо причинам не вышло, то выполняется простая переадресация на указанную страницу, тем самым функция showContent() сохраняет свою работоспособность. В тексте примере упоминаются ссылки на файлы page1.html и page2.html, которые загружаются в область контента. Они представляют собой простые HTML-страницы или текстовые файлы с контентом. Скачать исходные http://codething.ru/files/ajax_js_ex.zip

Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме

файлы

примера

(2,8

кб):

Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX; AJAX и jQuery. Динамическое обновление контента. Основы; AJAX и jQuery. Как загрузить скрипт JavaScript динамически?; AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON; Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

AJAX и jQuery. Как загрузить скрипт JavaScript динамически?

(изменения от 16.01.2012)

Автор: Михаил Источник: http://www.codething.ru/ajax_script.php

Пестречихин

Если вы только начинаете изучение технологии AJAX, то рекомендую начать со статьи "AJAX и jQuery. Динамическое обновление контента. Основы". Но те, кто уже ознакомился с основами, часто обращают внимание на то, что невозможно динамически загрузить страницу, содержащую JavaScript. И интересуются, как это сделать. Способ есть и он описан в данной статье. За один AJAX-вызов можно сделать что-то одно. Либо динамически загрузить HTML-страницу, способом, который описывался в статье выше, либо динамически загрузить JavaScript, используя jQuery-функцию .getScript(). Если нужно загрузить сначала HTML, а затем выполнить скрипт, то эти два метода можно комбинировать.

Пример №1. Загрузка обычного скрипта JavaScript динамически. Создадим 2 файла: example1.html - с функией вызова скрипта и script.js - непосредственно вызываемый скрипт. Содержимое HTML-файла example1.html: 1. <html> 2. <head> 3.

<script src='jquery.js'></script>

4. </head> 5. <body> 6.

<form>

7.

<input type="button" value="Выполнить скрипт JavaScript" onclick="btnClick();"/>

8.

</form>

9.

<div id="content">

10.

</div>

11.

<script>

12.

function btnClick() {

13.

$.getScript('script.js');

14.

}

15.

</script>

// вызываем скрипт

16. </body> 17. </html>

Следует обратить внимание на то, что в этом файле вызывается библиотека jQuery, а также создается пустой контейнер content и форма с кнопкой, к которой привязывается событие btnClick().

JavaScript-файл с названием script.js будет содержать функцию вывода случайного числа в контейнер content.

1. // случайное число от 1 до 100 2. var rnd = Math.floor(Math.random()*100+1); 3.

4. // выводим в контейнер content, добавляя уже к имеющемуся содержимому контейнера 5. $("#content").html($("#content").html()+rnd+"<BR/>");

Запускаем файл example1.html. Убеждаемся, что пример работает. Скачать исходные http://codething.ru/files/script_ex1.zip

файлы

примера

(32,1

кб):

Пример №2. Динамическая загрузка скрипта JavaScript, формируемого из PHP. Как и в примере №1, базовая HTML-часть (файл example2.php) у нас остается практически без изменений. Изменим лишь название загружаемого файла в функции $.getScript(): 1. $.getScript('script.php'); // вызываем скрипт

Скрипт (script.php) мы немного изменяем для того, чтобы продемонстрировать то, что он на самом деле генерируется с помощью PHP. Результатом его работы также станут случайные числа в диапазоне от 1 до 100.

1. <?php 2. // заголовок, который обозначает, что PHP будет генерировать 3.

// JavaScript-файл в кодировке UTF-8.

4.

header('Content-Type: text/javascript; charset=UTF-8');

5.

6.

// генерируем случайное число от 1 до 100

7.

$rnd = rand(1,100);

8.

9.

// выдаем код скрипта в поток вывода

10.

echo '$("#content").html($("#content").html()+'.$rnd.'+"<BR/>");';

11. ?>

Запускаем файл example2.html. Убеждаемся, что пример работает. Скачать исходные http://codething.ru/files/script_ex2.zip

файлы

примера

(32,1

кб):

Важно! Для того, чтобы примеры работали корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.

3. Если вы формируете JavaScript-файл из PHP-скрипта, следует в начале PHP-файла обязательно добавить вызов функции header(), как это сделано в примере №2.

1. header('Content-Type: text/javascript; charset=UTF-8');

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON; AJAX и jQuery. Динамическое обновление контента. Основы; Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX; Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

AJAX и jQuery. Динамическое обновление контента. Основы

(изменения от 03.01.2012)

Автор: Михаил Источник: http://www.codething.ru/ajax.php

Пестречихин

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

AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. jQuery - JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX. Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery. Перейдем к рассмотрению примеров. Важно! Для того, чтобы примеры работали корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла. Содержимое файла index.html.

1. <html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> 4. <script type="text/javascript" src="jquery.js"></script> 5. </head> 6.

7. <body> 8.

9.

<div id="content"></div>

10.

11.

<script>

12.

function show()

13.

{

14.

$.ajax({

15.

url: "time.php",

16.

cache: false,

17.

success: function(html){

18.

$("#content").html(html);

19.

}

20.

});

21.

}

22.

23.

$(document).ready(function(){

24.

show();

25.

setInterval('show()',1000);

26.

27.

}); </script>

28.

29. </body> 30. </html>

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.

1. <script type="text/javascript" src="jquery.js"></script>

Сам файл jquery.js - находится в той же папке, что и файлы примера.

2. В теле документа создается контейнер, в который мы будем загружать контент.

1. <div id="content"></div>

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

1. $(document).ready(function(){ 2. show(); 3.

4. });

setInterval('show()',1000);

4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.

1. $.ajax({ 2. url: "time.php", 3.

cache: false,

4.

success: function(html){

5.

6.

$("#content").html(html); }

7. });

Рассмотрим используемые параметры функции $.ajax().

1. url: "time.php"

Обращается к файлу time.php для получения контента.

1. cache: false

Результаты запросов не кэшируются.

1. success: function(html){ 2. $("#content").html(html); 3. }

При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке: 1. $("#content").html(html);

Содержимое файла time.php.

1. <?php echo date("H:i:s"); ?>

Смысл работы файла time.php - выводим текущее время на экран. Скачать исходные http://codething.ru/files/ajax_ex1.zip

файлы

примера

(16,6

Пример 2. Динамическое обновление контента по выбору пользователя Программа, динамически загружающая контент, по выбору пользователя. Содержимое файла index.html.

1. <html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> 4. <script type="text/javascript" src="jquery.js"></script> 5. </head> 6.

7. <body> 8.

кб):

9.

<p>Какую страницу желаете открыть?</p>

10.

<form>

11.

<input id="btn1" type="button" value="Страница 1">

12.

<input id="btn2" type="button" value="Страница 2">

13.

</form>

14.

<div id="content"></div>

15.

16.

<script>

17.

$(document).ready(function(){

18.

19.

$('#btn1').click(function(){

20.

$.ajax({

21.

url: "page1.html",

22.

cache: false,

23.

success: function(html){

24.

$("#content").html(html);

25.

}

26.

});

27.

});

28.

29.

$('#btn2').click(function(){

30.

$.ajax({

31.

url: "page2.html",

32.

cache: false,

33.

success: function(html){

34.

$("#content").html(html);

35.

}

36.

});

37.

});

38.

39.

40.

}); </script>

41.

42. </body> 43. </html>

В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента. Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события. Событие нажатия на кнопку "Страница 1" обрабатывается функцией $('#btn1').click(), а событие нажатия на кнопку "Страница 2" обрабатывается функцией $('#btn2').click(). Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом. Скачать исходные http://codething.ru/files/ajax_ex2.zip

файлы

примера

(18,4

кб):

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени. Содержимое файла index.html.

1. <html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> 4. <script type="text/javascript" src="jquery.js"></script> 5. </head> 6.

7. <body> 8.

9.

<form id="myForm">

10.

Введите имя:<br/>

11.

<input id="username" type="text" size="20"><br/><br/>

12.

<input type="submit" value="Отправить">

13.

</form>

14.

15.

<div id="content"></div>

16.

17.

18.

<script> $(document).ready(function(){

19.

20.

21.

22.

$('#myForm').submit(function(){ $.ajax({ type: "POST",

23.

url: "greetings.php",

24.

data: "username="+$("#username").val(),

25.

success: function(html){

26.

$("#content").html(html);

27.

}

28.

});

29.

return false;

30.

});

31.

32.

33.

}); </script>

34.

35. </body> 36. </html>

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента. Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку "Отправить", выступает функция $('#myForm').submit(). Рассмотрим эту функцию.

1. $('#myForm').submit(function(){ 2. $.ajax({ 3.

type: "POST",

4.

url: "greetings.php",

5.

data: "username="+$("#username").val(),

6.

success: function(html){

7.

$("#content").html(html);

8.

}

9.

});

10.

return false;

11. });

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно: 1. type: "POST"

Тип передачи данных.

1. data: "username="+$("#username").val()

Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например: 1. data: "username=Vasya&age=18&sex=male"

Обратим внимание, что в конце написана строка: 1. return false;

Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы. Содержимое файла greetings.php.

1. <?php 2. echo "Приветствую, <b>".$_REQUEST['username']."</b>!<br>"; 3.

echo "В вашем имени букв: ".strlen($_REQUEST['username']).".";

4. ?>

Выводим на экран приветствие и подсчитываем количество символов в имени. Скачать исходные http://codething.ru/files/ajax_ex3.zip

файлы

примера

(16,8

кб):

В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи «Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно: 1. На страницах с динамическим обновлением контента, кнопка "Назад" в браузере не работает корректно.

2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript. От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются. Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме

AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON (изменения от 10.12.2012)

Автор: Михаил Источник: http://www.codething.ru/ajax_json.php

Пестречихин

Кто программирует AJAX-приложения, часто сталкивается с задачей передачи параметров из PHP или другого языка программирования в JavaScript. Обычно при этом передаются данные из базы данных, доступ к которым имеет только серверный скрипт. Как отобразить их на клиентском компьютере, не перезагружая страницу? Об этом и написана эта статья. Скажем пару слов о JSON (JavaScript Object Notation). Это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript (отсюда и получил свое название), но в данное время используется более широко. Например, если мы хотим записать массив из PHP в JSON, то вот что из этого выйдет. Исходный массив:

1. $n = array("Min" => 15, "Sec" => 44); Этот же массив в формате JSON: 1. {"Min":"15","Sec":"44"}

Подробная нотация формата JSON и его приложения для различных языков программирования приведены на сайте http://www.json.org/

Рассмотрим простой пример, который будет состоять из двух файлов. Первым файлом будет PHP-скрипт, который будет формировать JSON-запись, содержащую текущие минуты и секунды. Вторым файлом будет HTML-страница, содержащая JavaScript с применением библиотеки jQuery, который будет с периодичностью в 1 секунду вызывать PHP-скрипт, получать запись JSON и выводить её содержимое в контейнер веб-страницы.

Файл №1. json.php 1. <?

2.

header('Content-Type: application/x-javascript; charset=utf8');

3.

$n = array("Min" => date("i"), "Sec" => date("s"));

4.

echo json_encode($n);

5. ?>

В первой строке файла в функции header() мы задаем формат вывода JSON-записи, указываем, что документ является JavaScript'ом в кодировке UTF-8. Во второй строке формируем ассоциативный массив с полями Min и Sec, в которые записываем текущие значения минут и секунд. В третьей строке формируем JSON-запись из созданного массива.

Внимание! Функция json_encode() будет работать только в PHP версии 5.2 и выше.

Файл №2. example.html 1. <html> 2. <head> 3.

<script src="jquery.js"></script>

4. </head> 5. <body> 6.

<div id="info">Загрузка...</div>

7.

<script>

8.

function json_example()

9.

{

10.

$.getJSON('json.php', function(data) {

11.

s

12.

$.each(data, function(key, val) {

13.

= "";

s = s + key+' => ' + val + '<br/>'

14.

});

15.

$("#info").html(s);

16.

});

17.

}

18.

setInterval(json_example, 1000);

19.

</script>

20. </body> 21. </html>

В HTML-странице создается контейнер info. Функция json_example(), выполняющаяся 1 раз секунду, использует jQuery-функцию $.getJSON(), с помощью которой получает JSON-запись сервера, вызывая файл json.php. Далее, полученная JSON-запись разбивается на пары "ключ значение" функцией $.each(), собирается в HTML-виде в переменную s и выводится контейнер info, т.е. на экран в клиентском приложении. Скачать исходные http://codething.ru/files/json.zip

файлы

примера

(33

в с в

кб):

Важно! Для того, чтобы примеры работали корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. PHP-скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы. Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме AJAX и jQuery. Динамическое обновление контента. Основы; AJAX и jQuery. Как загрузить скрипт JavaScript динамически?; Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX; Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery (изменения от 26.11.2013)

Автор: Михаил Источник: http://www.codething.ru/guestbook2.php

Пестречихин

В статье рассмотрено применение библиотеки jQuery и технологии AJAX для динамического обновления содержимого гостевой книги без перезагрузки страницы. Внимание! В этой статье используется устаревшее расширение PHP для связи с MySQL! Приемы работы с СУБД MySQL через современное расширение PHP mysqli приведены в новой статье!

В качестве материала для разбора возьмем исходный код работающей гостевой книги из нашей предыдущей статьи «Гостевая книга своими руками на PHP и MySQL»: исходный код примеров (2 Кб)

Для начала поймем, что же такое AJAX и jQuery и зачем они нужны?

AJAX - это технология, позволяющая обмениваться данными между браузером и сервером без перезагрузок страницы, что бывает весьма удобно. jQuery – это JavaScript-библиотека, расширяющая и упрощающая разработку веб-сайтов. Помимо технологии AJAX в ней реализовано множество функций для работы с объектами (контейнерами) на веб-страницах. Официальный сайт jQuery: http://www.jquery.com/ Подробнее о динамическом обновлении контента средствами AJAX и jQuery читайте статью «AJAX и jQuery. Динамическое обновление контента. Основы».

Важно! Для того, чтобы пример работал корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8.

2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл. Приступим к разбору кода. Добавим в начало файла index.php строки с подключением библиотеки jQuery: 1. <head> 2. <script type="text/javascript" src="jquery.js"></script> 3. </head>

Далее, вынесем из файла index.php фрагмент кода, который отвечает за вывод содержимого гостевой книги, в отдельный файл show.php: 1. <!-- блок отображения сообщений--> 2.

3. <?php 4.

include ("dbconnect.php");

5.

6.

$c=0;

7.

// выбор всех записей из БД, отсортированных так, что самая последняя отправленная запис ь

8.

// будет всегда первой.

9.

$r=mysql_query ("SELECT * FROM gb ORDER BY dt DESC");

10.

while ($row=mysql_fetch_array($r))

11.

{

12.

if ($c%2)

13.

14.

15.

// для каждой записи организуем вывод.

$col="bgcolor='#f9f9f9'";

// цвет для четных записей

$col="bgcolor='#f0f0f0'";

// цвет для нечетных записей

else

16.

17.

?>

18.

<table border="0" cellspacing="3" cellpadding="0" width="90%" <? echo $col; ?>

19.

20.

style="margin: 10px 0px;"> <tr>

21.

<td width="150" style="color: #999999;">Имя пользователя:</td>

22.

<td><?php echo $row['username']; ?></td>

23.

</tr>

24.

<tr>

25.

<td width="150" style="color: #999999;">Дата опубликования:</td>

26.

<td><?php echo $row['dt']; ?></td>

27.

</tr>

28.

<tr>

29.

<td colspan="2" style="color: #999999;">

30.

---------------------------------------------------------------

31.

</td>

32.

</tr>

33.

<tr>

34.

<td colspan="2">

35.

<?php echo $row['msg']; ?>

36.

<br>

37.

38.

</td> </tr>

39.

40.

</table>

41.

<?php

42.

43.

$c++; }

44.

45.

if ($c==0) // если ни одной записи не встретилось

46.

echo "Гостевая книга пуста!<br>";

47.

48.

49. ?>

Как видим, в коде все осталось без изменений, просто теперь он находится в отдельном файле (поэтому добавилось подключение модуля dbconnect.php для соединения с БД). В файле index.php, в месте, где раньше располагался вывод, размещаем контейнер: 1. <div id="messages"> 2. </div>

В этот контейнер мы будем динамически загружать информацию с записями гостевой книги. Далее в файле index.php следует форма ввода сообщения, её код остался практически без изменений, но: 1. Мы убрали атрибуты name, action и method, и функцию splash(), вызываемую по событию onClick (контроль заполнения формы остался, просто теперь эта проверка выполняется в другой части кода) из строки и добавили параметр id: 1. <form id="myForm">

2. Убрали строку со скрытым полем action 1. <input type="hidden" name="action" value="add">

3. Подписали id для всех полей ввода. Как видно из изменений в форме, в нашем примере полностью изменилась процедура отправки данных на сервер и получение результатов с него. Отправка данных и получение содержимого гостевой книги описано в следующем скрипте: 1. <script> 2.

3.

// загрузка сообщений из БД в контейнер messages

4.

function show_messages()

5.

{

6.

$.ajax({

7.

url: "show.php",

8.

cache: false,

9.

success: function(html){

10.

$("#messages").html(html);

11.

}

12.

13.

}); }

14.

15.

$(document).ready(function(){

16.

17.

show_messages();

18.

19.

// контроль и отправка данных на сервер в фоновом режиме

20.

// при нажатии на кнопку "отправить сообщение"

21.

$("#myForm").submit(function(){

22.

23.

var name = $("#username").val();

24.

var msg

25.

if (name =='')

26.

{

= $("#msg").val();

27.

alert ("Заполните имя пользователя!");

28.

return false;

29.

}

30.

if (msg =='')

31.

{

32.

alert ("Заполните текст сообщения!");

33.

return false;

34.

}

35.

36.

$.ajax({

37.

type: "POST",

38.

url: "action.php",

39.

data: "username="+name+"&msg="+msg+"&action=add",

40.

success: function(msg){

41.

show_messages();

42.

43.

44.

} });

45.

return false;

46.

});

47.

48.

});

49.

50. </script>

Для того, чтобы событие submit не приводило к обновлению страницы в браузере, функция $ ("#myForm").submit() всегда должа возвращать значение false; Использование библиотеки jQuery в данном примере заключается в вызове функции $.ajax(), а также для простой адресации к объектам и их параметрам, например $(“#username”).val() – получает значение из поля ввода имени пользователя (id=”username”). Функция $.ajax() отрабатывает по разному в зависимости от параметров. Например, в функции show_messages() с помощью функции $.ajax() происходит загрузка данных из файла show.php в фоновом режиме: 1. $.ajax({ 2. url: "show.php", 3.

cache: false,

4.

success: function(html){

5.

6.

$("#messages").html(html); }

7. });

При успешной загрузке (параметр success), выполняется функция, заполняющая контейнер messages этими данными: 1. function(html){ 2. $("#messages").html(html); 3. }

А при обработке события нажатия на кнопку «Отправить сообщение» функция $.ajax() отправляет данные на сервер, опять же в фоновом режиме, не перегружая всю страницу: 1. $.ajax({ 2. type: "POST", 3.

url: "action.php",

4.

data: "username="+name+"&msg="+msg+"&action=add",

5.

success: function(msg){

6.

show_messages();

7.

8. });

}

Как мы видим, здесь используется метод POST (type: "POST") для отправки данных, как и в исходном примере. Данные из параметра data передаются файлу action.php (url: "action.php"). При успешной передаче данных, выполняется функция, описанная в параметре success, т.е. мы отображаем уже новые записи гостевой книги: 1. function(msg){ 2. show_messages(); 3. }

Как видно из примера, загрузка и отправка сообщений гостевой книги происходит без полного обновления страницы, что экономит нам время и трафик. Скачать полные исходные коды гостевой книги с динамическим обновлением содержимого без перезагрузки страницы можно здесь, 19 кб. Улучшения и упрощения принимаются по адресу: studio@pestr.ru

Статьи по теме Основные приемы работы с СУБД MySQL, используя PHP и расширение mysqli; Гостевая книга своими руками на PHP и MySQL; Виджет комментариев ВКонтакте. Добавляем интерактивность на сайт за 10 минут; AJAX и jQuery. Динамическое обновление контента. Основы; AJAX и JavaScript. Загрузка контента без перезагрузки страницы; AJAX и jQuery. Как загрузить скрипт JavaScript динамически?; AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON; Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX; Скрипт текстовой CAPTCHA для защиты от спам-ботов.

Виджет комментариев ВКонтакте. Добавляем интерактивность на сайт за 10 минут Автор: Михаил Источник: http://www.codething.ru/vkcomments.php

Пестречихин

О чем чаще всего думает начинающий веб-мастер? Конечно об интерактивности на своей страничке. Но зная один HTML её к сожалению, не возможно реализовать. Но на помощь часто приходят готовые решения сторонних разработчиков. Сейчас мы рассмотрим продукт крупнейшей социальной сети ВКонтакте - виджет комментариев. Для начинающих веб-мастеров этот виджет дает возможность добавить интерактивность на сайт в виде блока комментариев на каждой веб-странице, затрачивая минимум усилий. Рассмотрим, чем хорош новый виджет для веб-мастера: 1. Прост в установке. Установка с нуля на совершенно неподготовленный для этого сайт заняла у меня не более 10 минут и это вместе с прочтением документации.

2. Красиво выглядит на сайте.

3. Удобен и привычен большинству пользователей.

4. Связан с соц.сетью таким образом, что на стене у пользователя, оставившего комментарий на вашем сайте, остается информация о том, где он оставил комментарий с указанием ссылки на сайт. Эта же информация попадает и в новостную ленту пользователей в контакте и также содержит ссылку на сайт. Это обещает лавинообразный рост посещаемости для веб-мастеров, если есть что комментировать, конечно.

5. Нет анонимных пользователей. Существенные минусы тоже есть: 1. Комментарии не будут индексироваться поисковиками, т.к. виджет выполняется на JavaScript.

2. Виджет глючит и постоянно перезагружает страницу в IE 6, если пользователь не авторизован в контакте. Хоть IE 6 и старый, но по статистике им еще пользуется около 5% людей. Это много.

3. Нет единой панели администрирования для всех комментариев сайта, приходиться ходить по страницам и смотреть, кто что написал. Может сделают еще? Уже сделали. Можно пофантазировать, к чему приведет появление данного виджета комментариев в Рунете. Предполагаю, что постепенно теряющие популярность форумы потеряют её совсем. Гостевые книги - уйдут в небытие. Блогам будет все труднее удерживать пользователей, т.к. никто не захочет регистрироваться в них, для того, чтобы оставить комментарий. Вероятно, пользователи вообще станут намного реже где-то регистрироваться. Ознакомиться с инструкцией по установке http://vkontakte.ru/developers.php?o=-1&p=Comments

виджета

можно

по

ссылке:

p.s. Хоть и Facebook сделал это раньше, но у него нет такой популярности в России, как у соцсети ВКонтакте. Если Вы хотите дополнить статью или не согласны с автором, пишите нам: studio@pestr.ru

Статьи по теме

Гостевая книга своими руками на PHP и Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

MySQL.;