jquery ajax 호출시 Request Url 파라미터 뒤에 언더바(_) 붙는 이유

서버의 API 호출시 개발자도구( F12 )에서 네트워크탭 XHR 부분을 확인해보면 Request URL parameter부분에 언더바("_")가 붙는 경우가 있습니다. 실제 개발코드를 보면 서버에서도 클라이언트에서도 "_"를 넣어준적이 없는데 이 녀석은 어디서 나타난 것일까요??

 

언더바("_")는 제이쿼리 API인 $.ajax 또는 $.getJSON 함수를 사용중이고 {cache:false} 옵션을 사용한 경우에 자동으로 생성됩니다. 그 이유는 브라우저의 caching 기능을 방지하기 위해서 입니다.

 

 

브라우저 캐시란?

---

브라우저 캐시는 브라우저에서 로컬 웹 페이지 리소스를 저장하는 데 사용되는 메커니즘입니다.

(캐시 : 빠른 억세스를 위해 값을 임시로 저장하는 데 사용; 작은 데이터베이스)

브라우저 캐시를 사용하면 성능이 향상되고 대역폭 소비가 최소화되어 개선된 환경이 만들어집니다.

 

 

브라우저 캐시 사용?

---

위의 내용만 읽고나서는 브라우저 캐시를 무조건 사용해야 할 것 같지만 문제점이 있습니다.

만약, 서버에서 데이터가 변경되었는데 사용자가 브라우저 캐시에 저장된 내용을 불러온다면 어떻게 될까요?

사용자는 빠르게 데이터를 가져오겠지만 변경된 데이터를 읽지 못하는 현상이 발생합니다.

그렇다면 제이쿼리에서는 이러한 브라우저 캐시를 어떻게 제어하고 있을까요?

 

 

jQuery의 브라우저 캐시 제어

---

cache (default: true, false for dataType 'script' and 'jsonp')
Type: Boolean
If set to false, it will force requested pages not to be cached by the browser.
Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

[출처] https://api.jquery.com/jquery.ajax/

 

위의 내용은 제이쿼리 공식홈페이지에 나와있는 $.ajax 함수의 cache 옵션에 대한 설명입니다.

위의 내용에 따르면 cache의 default 옵션은 datatype=”script” 또는 “jsonp”를 제외한 모든 데이터 유형에 대해서 cache:true 입니다.

 

그러나 브라우저(특히 IE)마다 Ajax 요청 캐싱에 대한 기본 정책이 다르므로 주의해야 합니다.

 따라서 Ajax 요청에 명시적으로 cache:false를 설정해야 합니다. 

❗IE에서 cache:false를 설정안하면 동일한 URL에 대해 POST 요청을 할때 캐시된 응답을 불러옵니다.

 

💡{cache:false}
URL에 타임스탬프를 추가하여 브라우저가 자체 캐시를 무시하도록 속이는 역할
(cache: true 설정시 브라우저가 파일을 캐시함 - url에 언더바("_")가 나타나지 않는다)

 

Example

$.ajax('/ajax_handler.php', {cache:false});
// ajax_handler.php?_=1323308900002 (url 뒤에 이런식으로 붙음)

❗GET 요청시에만 사용되기 때문에 cache:false 옵션 사용 대신 POST로 바꾸는 방법도 있지만 RESTful하지 않기 때문에 사용을 권장하지는 않습니다.)

 

 

 

다양한 Jquery ajax 호출시 브라우저 cache 방지 방법

---

1. 전역 설정

$.ajaxSetup({cache: false})

jQuery 메소드 ($.get, $.ajax 등)에 관계없이 이후의 모든 AJAX 요청이 캐시되지 않도록 합니다.

💡API 호출시 모든 url에 언더바("_")가 붙는다면 js파일 어딘가에 해당 코드가 들어가 있을 수도 있습니다.

 

2. ajax 설정

$.ajax({
	method: "GET",
	url: "/some/path",
	data: { param: value },
	cache: false,
	success: function(result) {...}
});

❗$.getJSON 사용하는 경우에는 cache:false 옵션이 없습니다. (전역 설정 또는 $.ajax로 변경해서 사용)

 

3. 캐시 헤더 설정

response.setHeader("Pragma", "no-cache"); // HTTP 1.0 스펙
response.setHeader("Cache-Control", "no-cache"); // HTTP 1.1 스펙
response.setDateHeader("Expires",0);

💡Pragma, Cache-Control 둘 중 하나만 써도 되지만 혹시 모를 1.0에 대비해 둘다 설정합니다.

 

4. HTML 파일 캐시 방지

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

http-equiv	설명
cache-control	no-cache : 캐시를 사용하기 전에 재검증을 위한 요청을 강제함. no-store : 클라이언트의 요청, 서버의 응답 등을 일체 저장하지 않음 must-revalidate : 캐시를 사용하기 전에 만료된 것인지를 검증 💡콤마(,)로 여러개 설정 가능
expires	리소스가 validate 하지 않다고 판단할 시간을 설정 💡conten=’0’: 리소스 만료
pragma	HTTP 1.0 버전에서 HTTP 1.1의 Cache-Control 헤더와 같은 역할을 함 ex) Pragma: no-cache

 

 

 

 

 

---

참고자료

제목	url
IE 11 Ajax Caching 끄기	https://effortguy.tistory.com/36
jQuery에서 getJSON에 대해 캐시를 false로 설정하는 방법	https://stackoverflow.com/questions/13391563/how-to-set-cache-false-for-getjson-in-jquery