행복한 아빠

IE에서 jQuery ajax 호출이 한번만 되는 경우 본문

문제발생시

IE에서 jQuery ajax 호출이 한번만 되는 경우

행복한아빠 2009. 12. 18. 09:42

jQuery의 ajax API를 이용하여 웹애플리케이션을 구현하던 중 IE에서 이상한 현상을 발견하였습니다. jQuery의 ajax API 중 get 방식을 이용할 경우 IE에서 오직 한번만 서버를 호출합니다. 두번째 호출부터는 데이터가 바뀌어도 첫번째 정보를 주기에 갱신이 되지 않네요. 헐~

주로 불여우에서 개발하다가 나중에나 발견하는 현상인데 원인을 살펴보니 jQuery의 오류가 아니고 IE의 Caching 이슈이었습니다.

원인
Fire fox에서는 되고 IE에서는 안되니 IE에서 직접 XMLHTTP를 잡아서 호출해보았습니다.


아니나 다를까 fiddler로 잡아보니 서버 호출은 이루어지지 않고 4번째 줄 이벤트로 발생하지 않습니다. 구글링해보니 역시 IE의 caching 이슈가 있었습니다.



해결방법
URL이 같은면 IE의 ajax 연결은 그냥 cache를 사용하고 갱신하지 않습니다. 따라서 URL을 바꿔주면 간단히 해결됩니다. 예를 들어 URL 맨끝에 파라메터로 시간마다 변하는 수를 추가합니다. 아래 예처럼요. (extJS는 아래같이 URL을 붙여서 호출합니다.)

http://yourhost:port/context/scmstat/loc?_dc=1260790889296

또는 GET을 POST로 호출하면 된다고 합니다. GET을 POST로 호출하는 건 찜찜하고 좋지 않습니다. RESTful 하지도 않고 Rest 프레임워크에서는 동작하지도 않습니다. (메소드를 검사합니다)
URL 매번 살짝 변경해서 호출하는 것이 더 좋겠습니다.


jQuery ajax에서...
jQuery ajax 호출할 때 IE에서 위와 같은 현상이 발생하므로 cache 옵션을 끄는게 좋습니다. cache 옵션을 끄면 extJS와 비슷하게 URL 뒤에 ...loc?_=1260794363203 같이 시간값을 파라메터를 붙여서 호출합니다.

페이지의 모든 jQuery ajax cache 끄기
Ajax 호출 전 ajaxSetup으로 cache를 global하게 false로 설정합니다.

ajax 메소드 사용하기
$.get 메소드 대신 $.ajax 메소드를 이용하여 cache를 false 설정합니다.


문제점
이러면 HTTP cache 메커니즘(304 코드)을 사용할 수 없겠습니다. 모든 URL이 달라져 Ajax 호출을 매번 갱신이 되어야 합니다. 참 이리 저리 고민이 많습니다.


13 Comments
댓글쓰기 폼