| 
<?php
include('ClickCaptcha.class.php');
 $ClickCaptcha = new ClickCaptcha();
 $ClickCaptcha->bg = './images/click_bg_ajax.png';
 $ClickCaptcha->text = './images/click_text_ajax.png';
 // simple demonstration!
 $request = isset($_GET['request']) ? $_GET['request'] : '';
 if($request=='captcha'){
 $ClickCaptcha->display();
 //$ClickCaptcha->display([0-8]);
 //$ClickCaptcha->display([0-8], [3-10]);
 return;
 }else if($request=='submit'){
 //sleep(1);
 $position = isset($_POST['position']) ? $_POST['position'] : array(0, 0);
 $verifysession = $ClickCaptcha->validate($position[0], $position[1]);
 $verifysession = $verifysession?'true':'false';
 echo json_encode(array($verifysession, $position[0].', '.$position[1]));
 return;
 }
 ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>ClickCaptcha (Ajax)</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
 </head>
 <body>
 <div style="TEXT-ALIGN: center">
 <span id="return" style="display:none">
 Captcha: <span>false</span>, Position: <span>unknown</span>
 </span>
 <span id="loading" style="display:none"><img src="./images/loading.gif" border="0" /> Checking...</span><br />
 <form id="Click" action="example_ajax.php?request=submit" method="POST">
 <input type="hidden" name="position[]" />
 <input type="hidden" name="position[]" />
 <input type="image" src="example_ajax.php?request=captcha" />
 </form>
 </div>
 <script type="text/javascript">
 var isNotRun = true;
 $("#Click input").eq(2).click(function(){
 $("#Click input").eq(0).val(getPosition().X);
 $("#Click input").eq(1).val(getPosition().Y);
 return isNotRun;
 });
 $("#Click").submit(function(){
 isNotRun = false;
 $('#return').hide();
 $('#loading').show();
 $.ajax({
 url: $(this).attr('action'),
 data: $(this).serialize(),
 type: $(this).attr('method'),
 error: function(request){},
 success: function(json){
 $('#loading').hide();
 $('#return').show();
 $('#return').children("span").eq(0).html(json[0]);
 $('#return').children("span").eq(1).html(json[1]);
 $("#Click input").eq(2).attr("src", "./example_ajax.php?request=captcha&r="+Math.random());
 isNotRun = true;
 },
 dataType: 'json'
 });
 return false;
 });
 function getPosition(e){
 e = e || window.event;
 var obj = {
 X: 0,
 Y: 0,
 getElementPosition:function(){
 var pos = {
 "top": 0,
 "left": 0
 };
 if(obj.offsetParent){
 while(obj.offsetParent){
 pos.top += obj.offsetTop;
 pos.left += obj.offsetLeft;
 obj = obj.offsetParent
 }
 }else if(obj.x){
 pos.left += obj.x
 }else if(obj.y){
 pos.top += obj.y
 }
 return {
 Left: pos.left,
 Top: pos.top
 }
 }
 };
 if(e.offsetX && e.offsetY){
 obj.X = e.offsetX;
 obj.Y = e.offsetY;
 }else if(e.layerX && e.layerY){
 obj.X = e.layerX;
 obj.Y = e.layerY;
 }else{
 return null;
 }
 return obj;
 }
 </script>
 </body>
 </html>
 |