securitycoder.php,通过Ajax异步获取后台验证码 并完成验证

前题：前个礼拜写了一个后台php验证码生成的文件，当然只写了后台生成，没有达到我们想要的验证功能，那么今天，我就将这个验证码功能实现完成吧！

先附上后台验证码生成程序吧

文件名：verificationCode.php

header("Content-Type:image/png");

header("Cache-Control:no-cache");

//设置验证码的宽高

$w = 100;

$h = 40;

//要在服务器的内存中创建一个图片；

$img = imagecreate($w,$h);

//为图片分配一个背景颜色，RGB(255，255,255)

//2,3,4参数代表RGB，之所以分配180,420，是为了生成一个浅色背景

imagecolorallocate($img,rand(180,240),rand(180,240),rand(180,240));

//在图上生成一个随机字符

$src = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

//验证码背景

for($i=0;$i<4;$i++){

//生成一个一位的从1-36之间的随机数字

$c = $src[rand(1,strlen($src))-1];

//随机得到字符的颜色

$color=imagecolorallocate($img,rand(50,170),rand(50,170),rand(50,170));

//第二个参数设置为5代表上边据，10+$i*20代表左边距

imagestring($img,10,10+$i*20,10,$c,$color);

}

//生成图片并返回客户端

imagepng($img);

//清理内存

imagedestroy($img);

以上代码只实现了验证码生成的功能，并没有达到我们想要的效果的，我们都知道验证码是在前台进行敏感操作时进行验证的一个功能，但是我们这里的验证码，并没有达到我们想要的验证效果，那么该怎么在前台进行验证效果呢？

我刚开始的思路是，通过 cookies 来实现，但是那 安全性能好像不好，所以我放弃了他，转战 session 存储来实现。思路如下：

首先将我们生成的验证码通过储存到 session 中，然后在读取出来，通过 ajax 来进行对比。

从上面的代码中，可以看出，这个验证码是通过一个 for 循环，生成了一个4位字符的验证码，没循环一次，生成一位字符，然后在将这4位字符进行拼接输出，达到验证码的效果。这时候，我们就需要先声明下启用 session 存储了，然后，循环生成验证码的时候，将验证码的每一个字符存储到一个字符串中，然后在将这个字符串存储到session中去。

ps:在这一步的时候，我进入了一个误区，导致生成的验证码和储存到 session 中的验证码，永远不能进行匹配成功，除非是那种运气超级棒的人！

需要在以上贴出来的代码上进行修改，修改代码贴上来：

//首先在页头启用session存储

session_start();

//然后声明一个存储这4位验证码的字符串

$verificationCode='';

//在将生成的的每一个字符串进行拼接

for($i=0;$i<4;$i++){

$verificationCode.=$c;

}

//将字符串存储到 sessionCode 中

$_SESSION["sessionCode"] = $verificationCode;

做完以上工作，那么我们就完成了一半了，已经将我们生成的验证码储存到了 session 中了，接下来，我们需要做的就是如何在前台进行验证了。

这个，我想已经没有什么问题了，直接贴上代码吧！如下：

文件名：verificationCode.html

这里我们在html中调用这个验证码，直接 img 的 src 为我们的后台验证码的文件名

JS代码如下：

var code=document.getElementById("rese");

code.οnclick=changeSecurityCode;

//当验证码图片被点击的时候，进行图片切换

function changeSecurityCode(){

//之所以在后面加上一个随机数，是为了防止浏览器读取缓存图片

code.src="securityCode.php?tm="+Math.random();

}

function yanzheng(){

var xhr=getXhr();

var cd=document.getElementById('code').value;

xhr.open('post','session.php');

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

xhr.send('validateCode='+cd);

xhr.onreadystatechange=function(){

if (xhr.readyState==4&&xhr.status==200)

{

var text=xhr.responseText;

alert(text)

}

}

//当提交验证时，重新生成一个验证码

changeSecurityCode();

}

function getXhr(){

// 1 定义一个空对象

var xhr = null;

// 2 判断当前浏览器是否支持该核心对象

if(window.XMLHttpRequest){

// 当前浏览器支持该对象:其它浏览器

xhr = new XMLHttpRequest();

}else{

// 当前浏览器不支持该对象:IE浏览器

xhr = new ActiveXObject('Microsoft.XMLHttp');

}

return xhr;

}

ajax请求后台代码：

文件名：session.php

session_start();

//注意如此此处存在中文验证码时，用Ajax传值要注意存在中文乱码的问题

$validateCode=$_POST['validateCode'];

//获取存储在sessionCode值

$session=$_SESSION['sessionCode'];

if(strtoupper($validateCode)==strtoupper($session)){

//判断文本框中输入的值和$_SESSION中保存的验证码值是否相等

echo "验证成功";

}else{

echo "验证失败";

}

到此我们的验证码验证功能就完成了，新人一枚，当中思路如有错误，请多多指教！如有好的思路，也请联系我一起交流学习哦！

欢迎小伙伴们，在下面留言评论哦！

如果你觉得这篇文章不错或者对你有帮助，想请我喝一杯咖啡，可以打赏