jQuery ajax和Chrome缓存问题？

Question

我正在构建一个联系表单,通过jQuery使用ajax来获取CAPTCHA图像(和隐藏的数据字段)并在DOM准备好后将其放入表单中.此外,当单击CAPTCHA图像时,它会重新加载图像(和隐藏数据字段).

CAPTCHA图像创建脚本是我自己创建的,我已经使用了几年 - 它非常强大且工作正常,但这是我第一次尝试通过ajax将其集成到网站.

粗略地说我有以下jQuery.我认为支持HTML/CSS/PHP是相当无关紧要的 - 我可以提供一些如果有必要,但它似乎工作得很好...问题似乎是与jQuery或浏览器缓存Chrome ...

$(document).ready(function() {
    commentFormCaptchaWrapper = $('#captchawrapper');

    // Check DOM for CAPTCHA wrapper... if it's there get the CAPTCHA image
    if (commentFormCaptchaWrapper.length > 0) {getCaptchaImage()}

    // If the CAPTCHA image is clicked get a new one
    commentFormCaptchaWrapper.click(getCaptchaImage);
});


function getCaptchaImage(){
    commentFormCaptchaWrapper.html();
    $.ajax({
        url: '/captcha/ajax.captcha.php',
        type: 'post',
        cache: false,
        success: function(response){
            commentFormCaptchaWrapper.html(response);
        },
        error: function(response){
            alert ("Ajax Error");
        }
    });
}

一切正常我在Firefox(以及Opera,IE)中的使用方式,但它在Chrome中不起作用.在Chrome中,CAPTCHA图像和隐藏字段的初始ajax调用工作得很好,但是当你单击CAPTCHA时,Captchawrapper div被清空时会有一个短暂的闪烁(因此检测到点击确定)但它会重新加载相同的图像.

为了简要解释我的CAPTCHA脚本,通常它会根据某些文本生成图像并加密内容以用作文件名(带有时间戳后缀) - 然后使用唯一名称缓存图像.因此,CAPTCHA脚本在每次使用时都会提供不同的文件名,完全唯一.

我还没有完全掌握jQuery的速度,但是据我所知,我已经关闭了jQuery中的ajax缓存所以我无法弄清楚出了什么问题......有人可以帮忙吗？

Answer 1

根据我上面的评论,这里可能会出现两级缓存(请求和响应).cache: false在$.ajax呼叫上使用应足以防止在浏览器上进行请求缓存.

但是,在服务器级别,必须为浏览器设置正确的响应标头,以正确解释它应如何缓存响应.对于PHP,一组典型的"不要缓存!" 标题可能看起来像这样(至少):

$ts = gmdate("D, d M Y H:i:s") . " GMT";
header("Expires: $ts");
header("Last-Modified: $ts");
header("Pragma: no-cache");
header("Cache-Control: no-cache, must-revalidate");

OTOH,在通过Bondye发布的链接的答案中,还有另一个修复:

$.ajax({
    url: '/captcha/ajax.captcha.php',
    type: 'post',
    data: '', // <-- Add this!
    cache: false,
    success: function(response){
        commentFormCaptchaWrapper.html(response);
    },
    error: function(response){
        alert ("Ajax Error");
    }
});

尝试在电话中添加data: '',一行$.ajax().您还可以进一步检查错误回调中的数据,看看是否有一个奇怪的错误代码返回.