<?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>
|