jQuery ajax 및 Chrome 캐싱 문제가 있습니까?

Question

jQuery를 통해 ajax를 사용하여 CAPTCHA 이미지 (및 숨겨진 데이터 필드)를 가져오고 DOM 준비 후 양식에 놓는 연락처 양식을 작성하고 있습니다. 또한 CAPTCHA 이미지를 클릭하면 이미지 (및 숨겨진 데이터 필드)가 다시로드됩니다.

캡쳐 이미지 생성 스크립트는 2 년 동안 사용해 본 자신의 제작물입니다. 꽤 강력하고 잘 작동하지만, 아약스를 통해 웹 사이트에 통합하려고 시도한 것은 이번이 처음입니다. .

대략 다음과 같은 jQuery가 있습니다. 지원 HTML/CSS/PHP는 매우 중요하지 않습니다. 필요한 경우 제공 할 수 있지만 모두 잘 작동하는 것 같습니다. 문제는 Chrome에서 jQuery 또는 브라우저 캐싱으로 표시되는 것 같습니다 ...

모든 것이 정확히 Firefox에서 (그리고 실제로는 Opera와 IE에서) 사용하고 싶지만 Chrome에서는 작동하지 않습니다. Chrome에서 CAPTCHA 이미지 및 숨겨진 필드에 대한 초기 아약스 호출은 정상적으로 작동하지만 CAPTCHA를 클릭하면 Captchawrapper div가 비워지기 때문에 간단한 깜박임이 발생하므로 클릭이 감지되지만 동일한 이미지가 다시로드됩니다.

내 CAPTCHA 스크립트를 간단히 설명하기 위해 일반적으로 텍스트를 기반으로 이미지를 생성하고 파일 이름 (타임 스탬프 접미어가 붙음)으로 사용할 콘텐츠를 암호화합니다. 그러면 이미지가 고유 한 이름으로 캐시됩니다. 따라서 CAPTCHA 스크립트는 사용될 때마다 완전히 다른 고유 한 파일 이름을 제공합니다.

나는 아직 jQuery에 익숙하지 않다. 그러나 내가 아는 한 jQuery에서 아약스 캐싱을 사용하지 않도록 설정 했으므로 잘못된 점을 파악할 수 없다. 아무도 도와 줄 수 없다. ?

Answer 1

위의 내 의견에 따라 작성하면 여기 (요청 및 응답)에서 두 가지 수준의 캐싱이 발생할 수 있습니다. $.ajax 호출에서 cache: false을 사용하면 브라우저에서 요청 캐싱을 방지하기에 충분합니다.

그러나 서버 수준에서 브라우저가 응답을 캐시하는 방법을 올바르게 해석하려면 적절한 응답 헤더를 설정해야합니다. PHP의 경우 일반적인 "do not cache!" 헤더는 (최소한) 다음과 같습니다

$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"); 
    } 
}); 

시도가 $.ajax()에 data: '', 라인에 추가 요구. 또한 오류 콜백의 데이터를 검사하여 이상한 오류 코드가 다시 발생하는지 확인할 수 있습니다.