jQuery.ajax에 Cache가 남아 곤란하면 설정

개요

자주 사용하는 🔗j Jquery.ajax() 의 Cache 때문에,
언제 곤란한지와 대응하는 방법에 대해 설명을 드립니다.

※ ajax란 Asynchronous Javascript And Xml(비동기 방식의 Javascript와 xml)에서 브라우저 XMLHttpRequest의 객체를 이용하여 화면을 다시 로드하지 않고 내부(외부는 jsonp 방식)로 통신하는 방법

덧붙여서, jQuery.ajax에는 다양한 설정을 할 수 있으므로,
아래의 링크를 참고하여 맞추자.
🔗jQuery.ajax()
🔗[JavaScript] 알아두면 좋은 jQuery.ajax의 유용한 설정 항목 (준비 중)

언제 어려울까

예를 들어, 엄청나게 테스트했습니다. (Request Type : GET)
· 서버 측에 존재하는 json 파일 test_1,2,3을 호출합니다.
· 서버 측에 존재하지 않는 json 파일 one_test도 호출합니다.
· json 데이터의 'head'키의 값을 콘솔에 출력하고 있습니다.
・위의 동작을 재기동시키는 리로드 버튼이 있습니다.

ajax_cache_test.js

var ajaxCacheTest = {
    jsonFiles: {1:'1_test', 
                2:'2_test', 
                3:'3_test',
                4:'none_test'},

    getData: function(fileName) {
        $.ajax({
            type: 'GET', 
            url: 'ajaxTestJsonFiles/'+fileName+".json", 
            dataType: 'json',
            success: (res) => {
                console.log(res.head);
            },
            error: (err) => {
                // error
            }
        });
    }
}

$(function() {
    _.forOwn(ajaxCacheTest.jsonFiles, function(fileName, key) {
        ajaxCacheTest.getData(fileName);
    });
    $("#reload").on('click', function() {
        _.forOwn(ajaxCacheTest.jsonFiles, function(fileName, key) {
            ajaxCacheTest.getData(fileName);
        });
    });
});

1_test.json

{
    "head": "test_a"
}

그러면 당연히 다음과 같은 결과가 되네요.


그런 다음 json 파일의 데이터를 변경합니다.
그런 다음 다시 로드 버튼으로 다시 시작합니다.

그러면 거짓말의 결과를 출력하고 있습니다.
그 결과가 포인트입니다.
기존 파일의 내용이 변경되어도 기존 데이터를 응답합니다.
게다가 파일이 없어져도 변하지 않습니다.
(페이지 갱신은 괜찮습니다)

🌟 이런 상황은 같은 환경에서도 일어나지 않을 때도 있습니다. (원인을 알 수 없음)
그러나, 언젠가 반드시 일어나기 때문에, 이하의 대응을 추천하고 있습니다.

원인

원인은 ajax에서 한 번 통신 (Request Type : GET)을 성공하면
클라이언트 측에 Cache가 생성되어 다음부터는 Cache를 읽어 버립니다.
네트워크를 보면 성공한 후에는 접근 자체를하지 않습니다.

해결 방법

크게 ④개가 있습니다.
① 두 번째 : Ajax type 옵션을 POST로 설정합니다.type: 'POST'
② 두 번째 : Ajax cache 옵션을 false로 설정합니다.cache: false
③ 두 번째 : URL에 임의의 매개 변수를 전달합니다.url: fileUrl, dataType: 'json'?id=+Math.random()
④둘째: 메타태그로 대응합니다.

메타

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>