Обновляем картинку у Капчи

Капчу мы уже прикрутили. Но вот проблема, иногда прочитать ее без 0.5 не удается. Но если читать капчу всегда с 0.5, то тут не далеко и до проблем с печенью.

Дабы печень не страдала, приделаем к нашей капче возможность обновляться по желанию пользователя.

Итак сначала проанализируем что происходит когда формируется картинка.

Пользователь заходит на страницу регистрации, в момент разбора HTML кода, который браузер по запросу получил от сервера, браузер натыкается на тег img у которого в качестве источника изображения прописана ссылка на php-скрипт. Происходит запрос на запуск данного скрипта и в браузер отдается картинка, которая и есть наша капча.

В процессе запуска скрипта формируется переменная с кодом капчи и записывается в сессию.

Для того чтобы получить новую картинку надо перегрузить страницу вызвав тем самым новую загрузку картинки. Т.е. таким образом мы запускаем отработку скрипта повторно.

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

Теперь думаем как это сделать. Перезагрузка страницы неприемлема по той простой причине что при перезагрузке пропадут веденные нами данные. Стало быть надо передернуть только картинку.

Чудесно! Как это сделать? Можно с помощью модного AJAX, но есть способ и по проще.

Мы напишем маленькую функцию которая будет менять содержимое атрибута src таким образом чтобы для браузера это была всякий раз новая картинка. И тогда сам браузер позаботится о ее перезагрузке.

И так, вот наш тег с картинкой

<img src="cap.php" />

Теперь немного его модифицируем и запишем вот так

<img src="cap.php?nid=" onclick="chpic(this);" />

Теперь добавим джаваскрипт

<script language="javascript">
 function chpic(obj){
  nid = Math.floor( Math.random() * (1000 - 10 + 1) ) + 10;
  mylink = obj.src +  nid;
  obj.src = mylink;
 }
</script>

Сохраняем! Запускаем браузер, переходим на страницу регистрации, смотрим что у нас написано в атрибуте src? Что-то похожее на http://имя_сайта/cap.php?nid=

Теперь щелкаем на картинке с капчей и убеждаемся что значение в src изменилось ну и собственно сама картинка тоже.

Скрипту cap.php абсолютно все равно какой будет ему передан параметр, он его попросту не понимает и не принимает. Но для браузера это будет уже другой URL и он просто обязан будет запустить скрипт на исполнение, ну а нам это и нужно.

Это решение можно еще улучшать и улучшать. К примеру дописать реакцию картинки на наезд мышкой. Либо сделать отдельную кнопочку которая будет запускать функцию которая будет менять содержимое атрибута src. Но в таком случае прийдется немного модифицировать саму функцию chpic. И передавать ей в качестве параметра не this а
идентификатор тега img.

Но я думаю что это вы сделаете и без меня. А кто не сделает то так уж и быть в следующий раз напишу и про это.