jQuery.ajax() 요청 헤더 상태가 "304 Not Modified"인지 확인하는 방법

jQuery.ajax() 요청 헤더 상태가 "304 Not Modified"인지 확인하는 방법

jQuery.ajax() 요청 헤더 상태가 "304 Not Modified"인지 확인하는 방법

jqXHR.status, 「」는 반환됩니다.200304 Not Modified(수정되지 않음)

ifModified:true 는 XHR 데이터 요청을 파기하기 때문에 큰 도움이 되지 않습니다.

캐시 헤더를 수동으로 처리하지 않으면 불가능합니다.일반적으로 XHR API에서는 304개의 응답을 사용할 수 없습니다.

사용자 에이전트가 조건부 요청을 생성한 결과인 304 수정되지 않음 응답의 경우, 사용자 에이전트는 서버가 적절한 내용을 포함한 200 OK 응답을 보낸 것처럼 행동해야 합니다.

jQuery는 보통 304의 응답이 있었다는 것을 알지 못합니다.브라우저는 네트워크를 통해 실제로 일어나고 있는 일에 대해 JavaScript에 대해 정중한 거짓말을 하기 때문입니다.

그러나 좋은 소식(일종의)이 있습니다.Ajax가 304 응답을 생성하도록 할 수는 있지만 HTTP 캐시 헤더를 수동으로 설정하는 것만으로 가능합니다. If-Modified-Since ★★★★★★★★★★★★★★★★★」If-None-Match★★★★

는 '사용할 수 없다'를 허용해야 .setRequestHeader()헤더를 " " " " " " " " " " " )를 사용합니다.If-None-Match,If-Modified-Since304 수정되지 않음

따라서 다음과 같은 코드를 사용할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.html");
xhr.setRequestHeader("If-Modified-Since", "Fri, 15 Feb 2013 13:43:19 GMT");
xhr.send();

근본적인 어려움 중 하나는 마지막으로 수정된 날짜 또는 ETAG를 어떻게 알 수 있는가 하는 것입니다.브라우저에는 요청 전송에 사용하는 캐시 정보가 있지만, 이 정보는 JavaScript와 공유되지 않습니다.다행히 jQuery는 다음 정보를 추적합니다.Last-Modified ★★★★★★★★★★★★★★★★★」ETag할 수 .ifModified:truejQuery가 다음에 해당 리소스에 대한 요청을 보낼 때 해당 헤더 값을 설정하도록 합니다.

이에 대해 주의할 점은 두 가지입니다.

• 304 응답은 데이터를 전송하지 않습니다.이것은 고의로 만든 것이다.캐시를 사용하기로 선택한 경우 캐시에 이미 데이터 복사본이 있어야 합니다.서버로부터 데이터를 취득하지 않는 것이 문제가 되는 경우(즉, 데이터가 아직 없기 때문에), 캐싱을 사용하는 이유는 무엇입니까?캐싱은 오래된 데이터가 있고 새로운 데이터만 필요한 경우 사용해야 합니다.따라서 304를 사용하여 데이터를 반환하지 않아도 문제가 없습니다.

• 에는 최종 jQuery와 함께 하려면 ETAG)가 합니다.If-None-Match가 이전 가 이전 요청에서 저장되었습니다.츠키다

  • fetch: 에는 캐시에 "jQuery: jQuery"는.If-Modified-Since ★★★★★★★★★★★★★★★★★」If-None-Match응답이 돌아오면 서버는 마지막으로 수정된 데이터 또는 ETAG를 발표할 수 있으며, jQuery는 나중에 사용하기 위해 이를 저장합니다.

  • 후속 가져오기: jQuery에는 마지막 가져오기 캐시 정보가 있으며 해당 데이터를 서버로 전송합니다.리소스가 변경되지 않은 경우 Ajax 요청은 304 응답을 받습니다.리소스가 변경된 경우 Ajax 요청은 jQuery가 다음 가져오기에 사용할 새 캐시 정보와 함께 200 응답을 받습니다.

  • jQuery는 페이지 새로고침 사이에 캐시 정보(예: 쿠키)를 유지하지 않습니다.따라서 jQuery에는 송신할 캐시 정보가 없기 때문에 페이지 새로고침 후 리소스의 첫 번째 페치는 304가 되지 않습니다(즉, "첫 번째 페치" 케이스로 리셋됩니다).jQuery가 캐시 정보를 유지할 수 없는 이유는 없지만 현재 캐시 정보는 유지되지 않습니다.

여기서 중요한 것은 캐시 헤더를 사용하여 JavaScript 304 응답을 얻을 수 있지만 브라우저 자체의 ETag 또는 특정 리소스에 대한 최종 수정 날짜에 액세스할 수 없다는 것입니다.따라서 브라우저 자체는 리소스에 대한 캐싱 정보를 인식할 수 있지만 JavaScript 코드는 인식할 수 없습니다.이 경우 브라우저는 캐시 헤더를 사용하여 실제 304 응답을 얻을 수 있지만 JavaScript가 캐시 정보를 전송하지 않았기 때문에 JavaScript 코드에 200 응답을 전송합니다.

브라우저에 의해 알려진 캐시 정보와 JavaScript 코드에 의해 알려진 캐시 정보는 예측할 수 없는 방식으로 다를 수 있기 때문에 JavaScript 304 요청을 실제 네트워크 304 응답과 완벽하게 맞추는 것은 불가능합니다.그러나 대부분의 경우 304개의 요청을 정확하게 받는 것으로 대부분의 실제 개발 요구에 충분합니다.

예

다음은 Node.js로 기술된 간단한 서버 예입니다(단, 다른 언어로 포팅할 수 있을 정도로 단순해야 합니다).

require("http").createServer(function (req, res) {
  console.log(req.headers["if-modified-since"]);

  // always send Last-Modifed header
  var lastModDate = "Fri, 13 Feb 2013 13:43:19 GMT";
  res.setHeader("Last-Modified", lastModDate);

  // if the request has a If-Modified-Since header,
  //   and it's newer than the last modification,
  //   then send a 304 response; otherwise send 200
  if(req.headers["if-modified-since"] &&
     Date.parse(lastModDate) <= Date.parse(req.headers["if-modified-since"])) {
    console.log("304 -- browser has it cached");
    res.writeHead(304, {'Content-Type': 'text/plain'});
    res.end();
  } else {
    console.log("200 -- browser needs it fresh");
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('some content');
  }

}).listen(8080);

이 서버를 실행하면 브라우저에 페이지를 로드하고 브라우저 콘솔에서 다음 두 가지 테스트를 수행할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

이 스크립트에서는 항상200응답(브라우저에 의해 제공되어 있는 경우)If-Modified-Since요구 헤더를 취득하여304(첫 번째 요청 후 브라우저가 서버 주소를 확인한 후 모든 요청이 발생합니다.Last-Modifed(응답 헤더)를 참조해 주세요.

반면 이 스크립트에는 항상 304개의 응답이 표시됩니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.setRequestHeader("If-Modified-Since", "Fri, 15 Feb 2013 13:43:19 GMT");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

이 스크립트는 독자적인 기능을 제공합니다.If-Modified-Sincerequest header(서버의 마지막 종료일로부터2일 후).브라우저가 제공하는 모든 것에 의존하지 않습니다.If-Modified-Since따라서 (XHR 사양에 따라) 304개의 응답을 표시할 수 있습니다.

마지막으로 이 스크립트에서는 항상200:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.setRequestHeader("If-Modified-Since", "Fri, 12 Feb 2013 13:43:19 GMT");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

이는 스크립트가 다음 명령을 사용하기 때문입니다.If-Modified-Since서버의 마지막 송신일 이전이기 때문에 서버는 항상200. 서버가 를 송신하지 않는다.304클라이언트에 최신 버전의 캐시된 복사본이 없는 것으로 가정하기 때문입니다(즉, 클라이언트는 2월 12일 이후 변경되었다고 발표하지만, 2월 13일 변경은 클라이언트가 본 것 같지 않습니다).

또한 응답이 캐시에서 나오는 경우 헤더가 캐시됩니다.난 이걸 기회로 삼았어.서버가 고유한 md5 헤더를 전송합니다.이것은 「time=time」과 같은 효과가 없습니다.다음으로 JS측에서 최신 md5 헤더를 확인합니다.응답이 캐시에서 송신되기 전과 같은 MD5 헤더를 수신했을 경우.JQuery는 잊어버렸지만 헤더를 설정하고 읽을 수 있다는 것을 알았습니다.

<?php
$oldMD5=filter_input(INPUT_SERVER,'HTTP_CONTENT_MD5',int);
if(!empty($oldMD5)){
  header('Content-MD5: '.(1+(int)$oldMD5));
}
--------------------------------------------------------------
<script>
var oldMD5=0;
//your Ajax implementation 
Ajax.setRequestHeader('Content-MD5',''+oldMD5);
var newMD5=parseInt(Ajax.getResponseHeader('Content-MD5'),10);
if(newMD5 && oldMD5<newMD5,10){
  oldMD5=newMD5;
  //not cached
}else{
  //cached
}

md5는 '디코딩된 데이터가 처음에 전송된 것과 동일한 데이터'임을 확인하기 위한 해시여야 하기 때문에 이는 약간 잘못된 것입니다.

https://github.com/laukstein/ajax-seo/blob/cbed03222d89f6f7e75dc49ce8882c30201bbb86/index.php#L266-274에 실장되어 있습니다.

var cache;

$.ajax({
    ...
    beforeSend: function() {
        cache = setTimeout(function() {
            console.log('The content not cached jet.');
        }, 300);
    },
    success: function(data) {
        if (cache) {
            clearTimeout(cache);
        }
    }
});

이거 먹어볼래?

$.ajax({
    url: 'your-url',
    dataType: 'script',
    complete: function(xhr) { 
        if (xhr.status == 304) return;
        // or better: if (xhr.status != 200) return;
        // your code goes here
    }
});

브라우저 인스펙터를 열면 상태를 포함한 Ajax 요청에 대한 정보가 나타납니다.

chrome의 경우 마우스 오른쪽 버튼을 클릭하여 inspect element를 선택한 다음 Network 탭으로 이동합니다.

파이어폭스를 사용하고, 같은 순서를 실행해 주세요.

언급URL : https://stackoverflow.com/questions/5173656/how-to-check-if-jquery-ajax-request-header-status-is-304-not-modified