基于ajax实现验证码功能

实现验证码功能通常都会使用图片形式的验证码。但是，这种验证码存在一定的缺陷，例如图片难以识别、容易被机器识别等问题。因此，在某些情况下，我们可以考虑使用基于ajax实现的验证码功能来提高安全性。

具体实现步骤如下：

1.创建验证码php文件

首先，我们需要创建一个名为captcha.php的php文件，用于生成并输出验证码图片。代码示例如下：

session_start();
header("Content-type: image/png");//设置响应头部
$width = 100;//定义验证码图片的宽度
$height = 40;//定义验证码图片的高度
$code_len = 4;//验证码长度
$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';//字符池
$code = '';
for ($i = 0; $i < $code_len; $i++) {//生成随机字符
    $code .= $chars[mt_rand(0, strlen($chars) - 1)];
}
$_SESSION['captcha'] = strtolower($code);//将验证码存储到session中
$img = imagecreatetruecolor($width, $height);//创建画布
$bg_color = imagecolorallocate($img, mt_rand(170, 255), mt_rand(170, 255), mt_rand(170, 255));//背景颜色随机
imagefill($img, 0, 0, $bg_color);//填充背景
//画验证码字符
for ($i = 0; $i < $code_len; $i++) {
    $color = imagecolorallocate($img, mt_rand(0, 150), mt_rand(0, 150), mt_rand(0, 150));//每个字符的颜色随机
    imagettftext($img, 20, mt_rand(-30, 30), $i * ($width / $code_len) + 10, mt_rand($height / 2 - 5, $height / 2 + 10), $color, 'arial.ttf', $code[$i]);
}
imagepng($img);//输出图片
imagedestroy($img);//销毁图片

2.在html中引入验证码文件

在html中，我们通过img标签引入之前创建的验证码php文件，代码示例如下：

<img id="captchaImg" src="captcha.php" alt="captcha">
<button id="changeCaptcha">看不清，换一张</button>

其中，img标签的src属性指向captcha.php，用于获取验证码图片。button标签的id为changeCaptcha，用于点击后改变验证码图片。

3.ajax获取新验证码

当用户无法识别验证码，并点击了换一张按钮时，我们需要通过ajax获取新的验证码图片并替换原来的图片。

代码示例如下：

document.getElementById('changeCaptcha').addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'captcha.php?time=' + new Date().getTime(), true);//防止缓存，添加时间戳
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("captchaImg").src = xhr.responseText;
        }
    };
    xhr.send();
});

其中，我们通过XMLHttpRequest对象获取captcha.php文件，并将获取到的responseText赋给img标签的src属性，完成验证码图片的切换。

示例1：在注册界面中使用基于ajax的验证码功能

在用户注册界面中，我们通常会使用验证码功能来防止机器恶意注册。以下是注册界面的html代码示例：

<form id="registerForm" action="register.php" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="text" name="captcha" placeholder="验证码">
    <img id="captchaImg" src="captcha.php" alt="captcha">
    <button id="changeCaptcha">看不清，换一张</button>
    <button type="submit">注册</button>
</form>

在用户输入完用户名、密码和验证码后，当用户点击注册按钮时，我们需要对用户输入的信息进行验证，并提交给服务器进行注册。下面是实现的JavaScript代码示例：

document.getElementById('registerForm').addEventListener('submit', function (e) {
    e.preventDefault();//取消默认提交行为
    var captchaInput = this.querySelector('input[name=captcha]');//获取验证码输入框
    if (captchaInput.value !== '' && captchaInput.value === sessionStorage.getItem('captcha')) {
        this.submit();//提交表单
    } else {
        alert('验证码错误');//提示错误信息
    }
});

document.getElementById('changeCaptcha').addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'captcha.php?time=' + new Date().getTime(), true);//防止缓存，添加时间戳
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("captchaImg").src = xhr.responseText;
            sessionStorage.setItem('captcha', xhr.responseText.toLowerCase());//将验证码存储到sessionStorage中
        }
    };
    xhr.send();
});

在用户输入验证码后，我们通过sessionStorage保存用户输入的验证码，并在表单提交时进行验证。如果验证成功，则执行表单的提交操作，否则提示错误信息。

示例2：使用ajax在登录界面中实现验证码刷新

在登录界面中，我们也可以使用ajax实现验证码刷新，提高安全性。以下是登录界面的html代码示例：

<form id="loginForm" action="login.php" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="text" name="captcha" placeholder="验证码">
    <div id="captchaDiv">
        <img id="captchaImg" src="captcha.php" alt="captcha">
        <button id="changeCaptcha">换一张</button>
    </div>
    <button type="submit">登录</button>
</form>

在用户输入完用户名、密码和验证码后，当用户点击登录按钮时，我们需要对用户输入的信息进行验证，并提交给服务器进行登录。我们通过JavaScript实现验证码图片的刷新效果，代码如下：

document.getElementById('changeCaptcha').addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'captcha.php?time=' + new Date().getTime(), true);//防止缓存，添加时间戳
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("captchaImg").src = xhr.responseText;
        }
    };
    xhr.send();
});

在用户点击换一张按钮时，通过XMLHttpRequest对象获取captcha.php文件，并将获取到的responseText赋给img标签的src属性，完成验证码图片的切换。