前题：前个礼拜写了一个后台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 为我们的后台验证码的文件名

<img id=”rese” src=”securityCode.php” alt=”点击刷新验证码” />
<input id=”code” type=”text” />
<input type=”button” value=”test” />

JS代码如下：

var code=document.getElementById("rese");
code.onclick=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 "验证失败";
}

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

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

转载请注明：Falost的小窝 » 通过Ajax异步获取后台验证码 并完成验证