as_snipercaptcha.ru.htm at DHTML and CSS CAPTCHA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>as_snipercaptcha: Pure HTML (no GD) bar chart drawing class</TITLE>
<META http-equiv="Content-Type" Content="text/html; charset=windows-1251">
<STYLE TYPE="text/css">
<!--
body     { font-family:arial,helvetica;font-size:12px; }
pre { font-family: verdana,arial; font-size:11px; color:#0000FF;
      background-color: #E8E8FF; border: 1px solid #C0C0E0; padding-left:6px;
}
td   { font-family:arial,helvetica;font-size:12px;}
tr.odd   { background-color: #F0F0F8; color:#000000; }
tr.even  { background-color: #E0E0F0; color:#000000; }
h4       { background-color: #E0E0F0; color:#000000;
           text-align: left; }
h5       { background-color: #E0E0F0; color:#000000;
           text-align: center; }
.capnormal {font-size:11pt; color:#202020; background-color:#A0A0E0;
        border: 1px solid #9090C0; width:12px;
}
td.captcha_cell { border: 1px solid #9090C0; background-color:#E0E0F8;
  text-align:center; font-size:4px;
}
td.captcha_cellmo { border: 1px solid #9090C0; background-color:#B0B0E8;
  text-align:center; font-size:4px;
}

-->
</STYLE>

</head>
<BODY>

<!-- DOC BEGIN -->

<H3>as_snipercaptcha: CSS/DHTML (áåç GD-áèáëèîòåê) CAPTCHA êëàññ</H3>

as_snipercaptcha.php ñîäåðæèò PHP êëàññ (CSniperCaptcha) äëÿ ðàñïðîñòðàíåííîé çàäà÷è, èçâåñòíîé ïîä àáðåâèàòóðîé CAPTCHA -
çàùèòû èíòåðàêòèâíûõ ñàéòîâ è ôîðì îò ñïàì-ðîáîòîâ.
<br />

Â îòëè÷èå îò áîëüøèíñòâà àíàëîãè÷íûõ CAPTCHA - äâèæêîâ, çäåñü íå èñïîëüçóþòñÿ ãðàôè÷åñêèå áèáëèîòåêè ãåíåðàöèè èçîáðàæåíèé (òèïà GD)
è íå ñîçäàåòñÿ êàðòèíîê ñ èñêàæåííûìè áóêâàìè è öèôðàìè äëÿ ðàñïîçíàâàíèÿ ÷åëîâåêîì
(ïîäîáíûõ êëàññîâ â Ñåòè äîñòàòî÷íî).
<br />

<script language="Javascript">
var curbar = 0;
function clkNext() {
  curbar +=20;
  if(curbar>100) curbar=0;
  document.getElementById('caprogress').style.width = ''+curbar+'%';
  return false;
}
</script>
<table width="100%"><tr>
<td>

<div id='cpholder' style='background-color:#C0C0FF; border: 1px solid #A0A0A8;'>
<table border='0' cellspacing='1' cellpadding='0' id='captchaTable'><tr>
  <td id='vul11' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='ybp12' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='idv13' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='rks14' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='pqw15' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='iuc16' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='qwn17' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='zol18' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  </tr><tr>
  <td id='dft21' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='gmw22' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='qno23' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='gjm24' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='lpy25' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='cih26' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='dme27' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='odn28' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  </tr><tr>
  <td id='xrj31' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='apa32' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='qsw33' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='xxj34' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='jps35' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='xji36' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='hws37' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  <td id='jpo38' onClick='return clkNext()'  class='captcha_cell' style='cursor:hand' onMouseOver='this.className="captcha_cellmo"' onMouseOut='this.className="captcha_cell"'><img src='empty.gif' width=12 height=12/></td>
  </tr><tr>
  <td colspan='8' onClick='return clkNext()'  class='captcha_cell' style='text-align:left'><img id='caprogress' src='cap_progress.png' width='1' height='8' />
  </td></tr></table></div>
</td>

<td width="99%" valign=top>
Îñíîâíàÿ èäåÿ ïðîñòà : ïîëüçîâàòåëü (ïîñåòèòåëü ñàéòà) íå ââîäèò óâèäåííûå áóêâû/öèôðû â ñïåöèàëüíî îòâåäåííîå INPUT - ïîëå,
âìåñòî ýòîãî îí âèäèò íà ýêðàíå òàáëèöó (ñåòêó) èç íåñêîëüêèõ ñòðîê è ñòîëáöîâ, ãäå îäíà èç ÿ÷ååê "ïîäñâå÷åíà" ñïåöèàëüíîé êàðòèíêîé-óêàçàòåëåì.
Îí ùåëêàåò ïî ýòîé ÿ÷åéêå ìûøüþ, â îòâåò óêàçàòåëü ïåðåõîäèò íà äðóãóþ ÿ÷åéêó. Ò.å. "êîäîâîå ñëîâî" â íàøåì ñëó÷àå ñîñòîèò èç
âåðíîé ïîñëåäîâàòåëüíîñòè âûáðàííûõ ÿ÷ååê.
Â îòâåò íà êàæäîå íàæàòèå (êëèê) ìûøè áðàóçåð îòïðàâëÿåò îòâåò (ID ÿ÷åéêè) íà ñåðâåð ñ ïîìîùüþ AJAX-çàïðîñà,
äîæèäàåòñÿ îòâåòà, â êîòîðîì ñîäåðæàòñÿ êîîðäèíàòû ñëåäóþùåé öåëè, â êîòîðóþ íàäî "ïîïàñòü".

Êîãäà âñÿ ïîñëåäîâàòåëüíîñòü âûïîëíåíà, ñ ñåðâåðà ïðèõîäèò îòâåò î òîì, ïðîéäåí èëè íåò òåñò íà "÷åëîâå÷íîñòü" ïîëüçîâàòåëÿ.
Ïðè æåëàíèè Âû ìîæåòå ñîîòâåòñòâóþùèì Javascript-êîäîì îáðàáîòàòü îòâåò è âûïîëíèòü îïðåäåëåííûå äåéñòâèÿ íà ôîðìå êëèåíòà.
</td>
</table>

<br>
<H4>Óñòàíîâêà as_snipercaptcha</H4>
<ol>
  <li>
  Ñêà÷àâ äèñòðèáóòèâíûé zip-ôàéë, ðàñïàêóéòå åãî â ëþáóþ ïàïêó.
  Â çàãîëîâêàõ ñêðèïòîâ, êîòîðûå áóäóò èñïîëüçîâàòü íàø êëàññ, íå çàáóäüòå âïèñàòü
  <br /><b>require_once('as_snipercaptcha.php')</b>;
  <br />Óêàçûâàòü ëè ïóòü ê ôàéëó, êàê âñåãäà çàâèñèò îò òîãî, êóäà Âû ñêîïèðóåòå ìîäóëü.
  <br />Åñëè íà Âàøåì ñàéòå óæå èñïîëüçóåòñÿ ôðåéìâîðê jQuery, ðåêîìåíäóåòñÿ èñïîëüçîâàòü jquery-âåðñèþ êëàññà -
  <b>as_snipercaptcha_j.php</b>. Íåîáõîäèìîñòü â ôàéëå as_jsfunclib.js â ýòîì ñëó÷àå îòïàäàåò. Ê òîìó æå jQuery-âåðñèÿ êëàññà
  ìîæåò îáëàäàòü ëó÷øåé ñîâìåñòèìîñòüþ ñ ðàçíûìè áðàóçåðàìè.
  </li>
  <li>
  Ïåðåíåñèòå/ñêîïèðóéòå ôàéëû èçîáðàæåíèé (*.png, *.gif) â Âàøó îñíîâíóþ ïàïêó "images" íà ñàéòå, è "ïóòü" ê ïàïêå
  çàäàéòå â êîíñòàíòå IMGPATH (ëèáî ïðîñòî ïîëîæèòå ôàéëû â îäèí êàòàëîã ñ Âàøèì ñêðèïòîì) :
  <br /><b>define('IMGPATH','allimages/');</b>
  <br />Ôàéë <b>captchasight.png</b> - ýòî "ìàðêåð", êîòîðûì ïîìå÷àåòñÿ î÷åðåäíàÿ ÿ÷åéêà âûáîðà.
  <b>cap_progress.png</b> íóæåí äëÿ îòðèñîâêè ñòîëáèêà "òåðìîìåòðà", ïîêàçûâàþùåãî ïðîãðåññ ïðîöåäóðû ïðîâåðêè.<br />

  </li>
  <li>
  Äëÿ ôîðìèðîâàíèÿ AJAX-çàïðîñîâ íàì ïîíàäîáèòñÿ áèáëèîòåêà ôóíêöèé as_jsfunclib.js.
  Ïîýòîìó ñêîïèðóéòå/ïåðåíåñèòå ýòîò ôàéë â ñâîþ ïàïêó ñ js-ñêðèïòàìè ëèáî â òåêóùóþ ïàïêó.
  Åñëè ôàéë áóäåò â äðóãîé ïàïêå, íå çàáóäüòå óêàçàòü ïóòü â ìåòîäå DrawRefs() (ñì.íèæå)
  </li>
  <li>
  Ñòèëè, èñïîëüçóåìûå ïðè îòðèñîâêå ðåøåòêè, âûíåñåíû â îòäåëüíûé ôàéë as_captchastyles.css - îñòàâüòå åãî
  â ðàáî÷åé ïàïêå èëè ïåðåíåñèòå â ñâîþ ïàïêó äëÿ ñòèëåé - â ýòîì ñëó÷àå óêàæèòå ïóòü ê íåé ïðè âûçîâå ìåòîäà
  DrawRefs() (ñì.íèæå).
  </li>

</ol>
<br />

<H4>Èñïîëüçîâàíèå êëàññà CSniperCaptcha</H4>

CSniperCaptcha ãåíåðèðóåò íåáîëüøóþ HTML òàáëèöó (èëè "ðåøåòêó"), êîòîðàÿ ìîæåò ñîäåðæàòü ïåðåìåííîå ÷èñëî ñòðîê,ñòîëáöîâ,
à òàêæå ïåðåìåííóþ øèðèíó-âûñîòó îäíîé ÿ÷åéêè.
Ýòè ðàçìåðíîñòè ìîãóò áûòü æåñòêî çàäàíû Âàìè ïðè âûçîâå êîíñòðóêòîðà êëàññà.
Åñëè èõ íå çàäàòü, ýòè çíà÷åíèÿ áóäóò âûáðàíû ñëó÷àéíûì îáðàçîì èç äèàïàçîíîâ 3...6 ñòðîê è 4...10 êîëîíîê.
<br />Ñëó÷àéíûé âûáîð ïðèçâàí çàòðóäíèòü îáõîä CAPTCHA-çàùèòû âîçìîæíûì ñïàì-ðîáîòîì èëè äðóãèì ìîäóëåì "ðàñïîçíàâàíèÿ".
Âîò êàê âñå ðàáîòàåò :
<ol>
 <li>
 Êîãäà ñåòêà äëÿ CAPTCHA äâèæêà ãîòîâà è âûâåäåíà áðàóçåðîì íà ýêðàí, âû÷èñëÿþòñÿ åå êîîðäèíàòû è ïîñûëàþòñÿ íà ñåðâåð
 ñ ïîìîùüþ AJAX-âûçîâà.
 </li>
 <li>
 Ïîëó÷èâ ýòè êîîðäèíàòû, ñåðâåð íà÷èíàåò ïîñëåäîâàòåëüíîñòü ïðîâåðêè: îí ïîî÷åðåäíî âûáèðàåò (ñëó÷àéíûì îáðàçîì) ñëåäóþùóþ
 ÿ÷åéêó, êîòîðàÿ äîëæíà áûòü "êëèêíóòà" ïîëüçîâàòåëåì, è ïîñûëàåò åå âû÷èñëåííûå êîîðäèíàòû â îòâåòå êëèåíòó.
 Êîîðäèíàòû âû÷èñëÿþòñÿ èñõîäÿ èç ïåðåäàííîãî ïîëîæåíèÿ ðåøåòêè, åå ðàçìåðíîñòè è øèðèíû-âûñîòû îäíîé ÿ÷åéêè.
 </li>
 <li>
 Êëèåíò, ïîëó÷èâ êîîðäèíàòû î÷åðåäíîé ÿ÷åéêè, ïåðåäâèãàåò DOM-ýëåìåíò "Image" â óêàçàííîå ìåñòî è îæèäàåò ùåë÷êà ìûøüþ.
 </li>
 <li>Ïîñåòèòåëü ñàéòà ùåëêàåò ïî óêàçàííîé ÿ÷åéêå, åå id îòïðàâëÿåòñÿ íà ñåðâåð.
 </li>
 <li>Êîãäà âñå NN øàãîâ âûáîðà ñäåëàíû, è ñåðâåð ïîëó÷àåò ïîñëåäíèé îòâåò, îí ïðîâåðÿåò êîððåêòíîñòü îòâåòîâ
 è çàïîìèíàåò ðåçóëüòàò â íàáîðå ñåññèîííûõ ïåðåìåííûõ, à òàêæå îòïðàâëÿåò êëèåíòó â ïîñëåäíåì îòâåòå.
 </li>
</ol>

Åñëè Âû ïîäãîòîâèòå ñâîè Javascript-ôóíêöèè äëÿ îáîèõ ñëó÷àåâ (CAPTCHA-òåñò ïðîéäåí, ïðîâàëåí),
èõ èìåíà ìîæíî ïåðåäàòü â êëàññ, è òîãäà îíè áóäóò âûïîëíåíû ñîîòâåòñòâåííî ïðè óñïåøíîì èëè "ïðîâàëåííîì" òåñòå.
Íàïðèìåð, ìîæíî ïîêàçàòü èçíà÷àëüíî ñêðûòûå ïîëÿ ââîäà òåêñòà, èëè ðàçáëîêèðîâàòü êíîïêè è äð.ýëåìåíòû ââîäà.
Ôóíêöèè áóäóò âûçâàíû ñðàçó ïî ïîëó÷åíèè îòâåòà îò ñåðâåðà íà ïîñëåäíèé âûáîð ÿ÷åéêè "ïðîâåðî÷íîé" ðåøåòêè.

<p>
Ïðèâåäåì ïðîñòåéøèé ïðèìåð ðàáîòû ñ êëàññîì. (Ðåøåòêà äëÿ CAPTCHA-òåñòà áóäåò ñãåíåðèðîâàíà ñî ñëó÷àéíûì ÷èñëîì ñòðîê
è ñòîëáöîâ, è ðàçìåðîì ÿ÷åéêè).
<pre>
require_once('as_snipercaptcha.php');

$captcha = new CSniperCaptcha();
// âûâåñòè îñíîâíîé HTML êîä, âêëþ÷àÿ íà÷àëüíûå òåãè ôîðìû - &lt;FORM ...&gt; è íåîáõîäèìûå ïîëÿ ââîäà

CSniperCaptcha::DrawRefs(); // âûâîæó ññûëêè íà èñïîëüçóåìûå CSS è js ôàéëû
$captcha-&gt;Draw(); // îòîáðàæàåòñÿ îïðîñíàÿ ðåøåòêà

//... òåïåðü âûâåñòè êíîïêó SUBMIT è çàêðûâàþùèå òåãè ôîðìû &lt;/FORM&gt;

$captcha-&gt;DrawJsCode(); // âûâîäÿòñÿ ñîïóòñòâóþùèå javascript-ôóíêöèè

// îñòàëüíîé HTML êîä ...
</pre>

<h4>CSniperCaptcha - ñïèñîê ìåòîäîâ</h4>

<li><b>CSniperCaptcha($codelen=4, $submitid='', $jscode_success='',$jscode_fail='', $reinit=false)</b> - êîíñòðóêòîð êëàññà.</li>
<br /><br />Ïàðàìåòðû:
<ul>
<li><b>$codelen</b> ÷èñëî "êëèêîâ" â ïîñëåäîâàòåëüíîñòè ïðîâåðêè (äëèíà êîäîâîãî ñëîâà)</li>
<li><b>$submitid</b> èäåíòèôèêàòîð (id) êíîïêè "submit". Åñëè ïàðàìåòð ïåðåäàí â êîíñòðóêòîð, ýòà êíîïêà ïîëó÷èò ñîñòîÿíèå "ðàçáëîêèðîâàíà"
ïðè óñïåøíîì îêîí÷àíèè ïðîâåðêè. Ïîíÿòíî, ÷òî â ýòîì ñëó÷àå íàäî íå çàáûòü âûâåñòè ó êíîïêè íà÷àëüíûé àòðèáóò DISABLED.
</li>
<li><b>$jscode_success</b> - Javascript êîä (îáû÷íî èìÿ ôóíêöèè ñî ñêîáêàìè "()" ), êîòîðûé äîëæåí áûòü âûïîëíåí
 ïðè óñïåøíîì ïðîõîæäåíèè òåñòà, ÄÎ íàæàòèÿ êíîïêè submit è îòïðàâêè ôîðìû íà ñåðâåð.
</li>
<li><b>$jscode_fail</b> - Javascript êîä (îáû÷íî èìÿ ôóíêöèè ñî ñêîáêàìè "()" ), êîòîðûé äîëæåí áûòü âûïîëíåí
 ïðè íåïðîéäåííîì òåñòå, ÄÎ íàæàòèÿ êíîïêè submit è îòïðàâêè ôîðìû íà ñåðâåð.
</li>

<li><b>$reinit</b> - <b>1</b> (öëîå ÷èñëî, èëè true) èëè Javascript êîä. Ëþáîé íåïóñòîé ïàðàìåòð âêëþ÷àåò âûâîä êàðòèíêè-ññûëêè,
  ïî íàæàòèþ êîòîðîé captcha ñáðàñûâàåòñÿ â íà÷àëüíîå ñîñòîÿíèå, è ïîëçîâàòåëü ìîæåò ïîâòîðèòü ïðîöåññ âàëèäàöèè.
  <br />Åñëè â ïàðàìåòðå ïåðåäàòü ñòðîêó, CSniperCaptcha èíòåðïðåòèðóåò åå êàê javascript êîä, êîòîðûé áóäåò äîïîëíèòåëüíî âûïîëíåí
  ïðè ñáðîñå "êàï÷è" (íàïðèìåð, åñëè íóæíî óáðàòü ñòðîêó î ïðîâàëåííîì captcha-òåñòå).<br />
  Â êà÷åñòâå êàðòèíêè "ñáðîñ" èñïîëüçóåòñÿ ôàéë "captcha_init.gif", âêëþ÷åííûé â äèñòðèáóòèâ (ìåíÿéòå ïîä ñâîþ öâåòîâóþ ñõåìó ñàéòà).
  Äîïîëíèòåëüíûé òåêñò ïðèãëàøåíèÿ ê "ñáðîñó" ìîæåò áûòü çàäàí â ãëîáàëüíîì àññîöèàòèâíîì ìàññèâå, <b>$sitestrings['captcha_init']</b>.
</li>

</ul>

<li><b>SetServerScript($uri)</b> - ýòîò ìåòîä çàäàåò èìÿ (URI) ñåðâåðíîãî ñêðèïòà, âûïîëíÿþùåãî ïðîâåðêó CAPTCHA òåñòà.
Ïî óìîë÷àíèþ âåñü îáìåí âî âðåìÿ ïðîâåðêè âåäåòñÿ ñ òåì æå ñêðèïòîì, êîòîðûé âûâåë ôîðìó.
</li>
<br /><br />Ïàðàìåòðû:
<ul>
<li><b>$uri</b> - èìÿ ôàéëà ñêðèïòà íà ñåðâåðå, êîòîðûé áóäåò îáðàáàòûâàòü AJAX çàïðîñû îò êëèåíòà è ïîñûëàòü îòâåòû
</li>
</ul>

<li><b>DrawRefs($csspath='',$jspath='')</b> - ìåòîä ôîðìèðóåò è âûâîäèò  &lt;STYLE&gt; è &lt;SCRIPT&gt; òåãè
   ñî ññûëêàìè íà ôàéëû captcha_styles.css è as_jsfunclib.js, èñïîëüçóåìûå â êëàññå (âõîäÿò â äèñòðèáóòèâ).
   Åñëè Âû ïåðåíåñåòå âñå ñòèëè èç ïðèëàãàåìîãî ôàéëà captcha_styles.css â öåíòðàëèçîâàííûé íàáîð, èñïîëüçóåìûé íà âñåì ñàéòå,
   è ïîòîìó íå õîòèòå âûâîäèòü ññûëêó íà css, ïåðåäàéòå <b>false</b> â ïàðàìåòð $csspath.
   Àíàëîãè÷íî - äëÿ $jspath.
   <br /><br />Ïàðàìåòðû:
   <ul>
   <li><b>$csspath</b> - ïóòü ê ôàéëó captcha_styles.css</li>
   <li><b>$jspath</b> - ïóòü ê ôàéëó as_jsfunclib.js</li>
   </ul>
</li>
<li><b>SetBufferedOutput($buffered=true)</b> - çàäàåò ðåæèì "áóôåðèçîâàííîãî" âûâîäà, ïðè êîòîðîì âåñü ñãåíåðèðîâàííûé
  HTML êîä íå èäåò â ïîòîê êëèåíòó. Âìåñòî ýòîãî âñå ìåòîäû (Draw(), DrawJsCode(), DrawRefs())
  âîçâðàùàþò ñîîòâåòñòâóþùèé HTML êîä.
  <br />Ýòî íåîáõîäèìî, êîãäà ðàçðàáîò÷èê ñíà÷àëà ñîáèðàåò âñþ HTML ñòðàíèöó â ïàìÿòè, è òîëüêî ïîòîì âûâîäèò
  åå â ïîòîê êëèåíòó.
  <br /><br />Ïàðàìåòð $buffered - íåîáÿçàòåëüíîå çíà÷åíèå ðåæèìà âûâîäà, (ëîãè÷åñêîå true|false èëè öåëîå).
  Ïî óìîë÷àíèþ true. False (èëè 0) çàäàåò ðåæèì "íåáóôåðèçîâàííîãî âûâîäà".
</li>

<li><b>Draw($width=0, $height=0, $cellsize=0, $tovar=0)</b> - ìåòîä ôîðìèðóåò (è âûâîäèò) HTML êîä CAPTCHA-ðåøåòêè.</li>

<br /><br />Ïàðàìåòðû:
<ul>
<li><b>$width</b> - ×èñëî êîëîíîê â ðåøåòêå. Åñëè íîëü, âûáèðàåòñÿ ñëó÷àéíûì îáðàçîì â äèàïàçîíå 4-10</li>
<li><b>$height</b> - ×èñëî ñòðîê â ðåøåòêå. Åñëè íîëü, âûáèðàåòñÿ ñëó÷àéíûì îáðàçîì â äèàïàçîíå 3-6</li>
<li><b>$cellsize</b> - ðàçìåð (â ïèêñåëàõ) îäíîé ÿ÷åéêè. Åñëè íîëü, âûáèðàåòñÿ ñëó÷àéíûì îáðàçîì â äèàïàçîíå 10-17.<br />
 <b>Çàìå÷àíèå:</b> íå çàäàâàéòå ñëèøêîì ìàëåíüêèé ðàçìåð ÿ÷åéêè. ×òîáû "ïîäñâåòèòü" ÿ÷åéêó, ïîäëåæàùóþ âûáîðó,
 ïîâåðõ íåå âûâîäèòñÿ êàðòèíêà-ìàðêåð, èìåþùàÿ ðàçìåð 7x7 òî÷åê. Åñëè îíà ïîëíîñòüþ íàêðîåò ÿ÷åéêó òàáëèöû, "ùåë÷îê" ïî íåé ñòàíåò
 íåâîçìîæíûì, è ïîëüçîâàòåëü íèêîãäà íå ïðîéäåò òåñòà !
</li>
<li><b>$tovar</b> : ïî óìîë÷àíèþ HTML êîä íåìåäëåííî âûâîäèòñÿ â ïîòîê êëèåíòó. Åñëè íóæíî îòëîæèòü âûâîä (ñäåëàòü ýòî ïîçæå ñàìîñòîÿòåëüíî),
ïåðåäàéòå íåïóñòîå çíà÷åíèå ïàðàìåòðà $tovar. Â ýòîì ñëó÷àå âìåñòî íåìåäëåííîãî âûâîäà ìåòîä Draw() âåðíåò ñãåíåðèðîâàííûé êîä.
Ðåêîìåíäóåòñÿ ïîëüçîâàòüñÿ ìåòîäîì SetBufferedOutput() - îí âêëþ÷àåò áóôåêðèçîâàííûé ââîä äëÿ ÂÑÅÕ ìåòîäîâ.
</li>
</ul>

<li><b>DrawJsCode($autostart=1)</b> - ýòîò ìåòîä âûâîäèò Javascript-ñêðèïòû íåîáõîäèìûå äëÿ ðàáîòû êëàññà.
Âûçûâàòü ýòî ìåòîä íóæíî ïîñëå âûâîäà ôîðìû ñ êîäîì CAPTCHA (ò.å. ïîñëå âûâîäà êîäà, ñãåíåðèðîâàííîãî ìåòîäîì Draw()).
Èñêëþ÷åíèå ñîñòàâëÿåò ñëó÷àé "îòëîæåííîãî" ñòàðòà ïðîöåäóðû ïðîâåðêè (ñì. ïàðàìåòðû)
<br /><br />Ïàðàìåòðû:
<ul>
  <li><b>$autostart</b> :
  Ïî óìîë÷àíèþ ñðàçó áóäåò âûçâàíà âíóòðåííÿÿ ôóíêöèÿ, ñòàðòóþùàÿ ïðîöåññ ïðîâåðêè êîäà - SendCaptchaChecking().
  <br />Åñëè íóæíî ñòàðòîâàòü åãî ïîçæå (íàïðèìåð, ïðåäâàðèòåëüíî âûâåñòè åùå êàêîé-ëèáî HTML-êîä, è òîëüêî ïîñëå ïîëíîé åãî çàãðóçêè êëèåíòó -
  äëÿ ýòîãî ìîæíî çàíåñòè âûçîâ SendCaptchaChecking() â ñâîéñòâî onLoad äîêóìåíòà),
  âûçûâàéòå ýòîò ìåòîä ñ íóëåâûì (false èëè 0) ïàðàìåòðîì:
  <br /> <b>$captcha-&gt;DrawJsCode(0);</b>
  </li>
</ul>

<h4>Ïîëíûé ïðèìåð èñïîëüçîâàíèÿ</h4>

Ìû áóäåì âûâîäèòü ðåøåòêó CAPTCHA ñî ñëó÷àéíûìè ðàçìåðàìè.
Äëèíà êîäîâîãî ñëîâà - 5 (ïîëüçîâàòåëü äîëæåí áóäåò ïîñëåäîâàòåëüíî âûáðàòü 5 ÿ÷ååê èç ðåøåòêè).
Êîãäà ïðîâåðêà çàêîí÷èòñÿ, êíîïêà îòïðàâêè SUBMIT äîëæíà áâòü àâòîìàòè÷åñêè ðàçáëîêèðîâàíà.
<br />(Çàìåòüòå, ÷òî ìû âûâîäèì åå ñ íà÷àëüíûì òåãîì DISABLED).

<pre>
require_once('as_snipercaptcha.php');

$captcha = new CSniperCaptcha(5, 'btn_submit'); // here SESSION is started, so NO HTML output before this !

// ò.ê. ýòîò æå ñêðèïò ïðèíèìàåò äàííûå ïî íàæàòèþ SUBMIT, çäåñü æå âêëþ÷àåì áëîê îáðàáîòêè ôîðìû:
if(!empty($_POST)) {
  if($captcha-&gt;CheckPassed()){
     // process user data (publish to the database etc.
     PublishNewMessage(); // Your function that does a job
     echo "Ñïàñèáî, Âàøå ñîîáùåíèå äîáàâëåíî !";
  }
  else {
     echo "Âû ðîáîò, äî ñâèäàíèÿ";
  }
  exit;
}

CSniperCaptcha::DrawRefs(); // âûâîæó ññûëêè íà CSS è js ôàéëû
// âûâîäèì HTML êîä, ñòàðòóþùèé FORM òåã
// è âñå ïîëÿ ââîäà (TEXTAREA è äð.) áåç êíîïêè 'submit'
echo "Îòïðàâêà ñîîáùåíèÿ";
$self = $_SERVER['PHP_SELF'];

CSniperCaptcha::DrawRefs('my_css/','my_js/'); // âûâîæó ññûëêè íà èñïîëüçóåìûå CSS è js ôàéëû

echo "&lt;FORM action='$self' method='POST' name='myform'&gt;";
echo "&lt;TEXTAREA name='messagetext' style='width:100%; height:120px'&gt;&lt;/TEXTAREA&gt;&lt;br /&gt;";

$captcha-&gt;Draw();

echo "&lt;input type='SUBMIT' id='btn_submit' name='btn_submit' value='Submit message' DISABLED /&gt;
echo "&lt;/FORM&gt;";
$captcha-&gt;DrawJsCode();
//... âûâîä îñòàëüíîãî HTML êîäà

</pre>

Âû ìîæåòå èñïîëüçîâàòü AJAX (XmlHTTPRequest) äëÿ ïîëó÷åíèÿ îò êëèåíòà äàííûõ ñ ôîðìû
(äàííûå îòïðàâëÿþòñÿ, è âûâîäèòñÿ ðåçóëüòàò áåç ïîëíîé ïåðåðèñîâêè âñåãî ýêðàíà),
Âàø ñåðâåðíûé backend php ñêðèïò äî îáðàáîòêè äàííûõ äîëæåí ïðîâåðèòü,
ïðîøåë ëè ïîëüçîâàòåëü òåñò CAPTCHA :

<pre>
// backend for processinbg posted data
require_once('as_snipercaptcha.php');
$captcha = new CSniperCaptcha();
if($captcha-&gt;CheckPassed()) {
   PublushFormData($_POST); // çäåñü äàííûå çàíîñÿòñÿ â áàçó è ò.ä.
   echo "Ñïàñèáî, ñîîáùåíèå ñîõðàíåíî"; // ajax response will go to the client
}
else echo "Îøèáêà, òåñò CAPTCHA íå ïðîéäåí";

</pre>

<H4>Èñòîðèÿ (âåðñèè)</H4>

<h5>1.03.007 (10.12.2008)</h5>
<ul>
  <li>Äîáàâëåí ìîäóëü, èñïîëüçóþùèé jQuery, <b>as_snipercaptcha_j.php</b>
  </li>
  <li>íåêîòîðûå óëó÷øåíèÿ êîäà
  </li>
</ul>

<h5>1.03.006 (03.12.2008)</h5>
<ul>
  <li>Çàïðîñû ïîëüçîâàòåëåé: êîãäà ìåíÿþòñÿ ðàçìåðû îêíà (èëè þçåð èçìåíÿåò ðàçìåð áóêâ â Mozilla FF, íàæèìàÿ CTRL+, CTRL-),
  captcha àâòîìàòè÷åñêè âûïîëíÿåò ðå-èíèöèàëèçàöèþ ñ ïîäñòðîéêîé ïîä íîâûå êîîðäèíàòû êàï÷à-ðåøåòêè.
  </li>
  <li>Íîâûé ïàðàìåòð â êîíñòðóêòîðå, $reinit, âêëþ÷àþùèé ôè÷ó "ñáðîñà" ñàìèì ïîëüçîâàòåëåì.
  </li>
</ul>

<h5>1.02.004 (10.05.2008)</h5>
<ul>
  <li>Èñïðàâëåíà ïðîáëåìà ñîâìåñòèìîñòè ñ FireFox (âîçíèêàëà ïðè íàëè÷èè â òåãå &lt;!DOCTYPE...&gt; ññûëêè íà DTD ôàéë)
  </li>
</ul>

<h5>1.0.001 (28.02.2008)</h5>
<ul>
  <li>Ïåðâûé ðåëèç.
  </li>
</ul>

<!-- DOC END -->
<br />
<hr>
<div align=center><font size=-2>Copyright &copy; Alexander Selifonov, <a href="http://as-works.narod.ru">as-works.narod.ru</a>
</font></div>
</HTML></BODY>