2013-12-18 2 views
1

Ruby on Rails 사이트에서 부분적인 HTML을 검색하기 위해 XHR 기반 HTTP GET을 실행하기 위해 jQuery의 $.ajax() 메소드를 사용하고 있습니다. 이 특별한 경우에, 탭 네비게이션을 사용할 때마다 서버에서 돌아온 데이터로 HTML 테이블을 업데이트했습니다. 문제는 서버에서 데이터를 사용할 수있게되면 결코 바뀌지 않는다는 것입니다. 사용자가 하나의 탭에서 다음 탭으로 이동할 때, 이미 필요하거나 캐싱되어야하는 데이터에 대해 불필요하게 더 많은 XHR 요청을 서버에 전송합니다. 나는 cache: true 속성을 사용해 보았습니다.하지만 생각했던 것처럼 작동하지 않습니다.jQuery ajax 캐시 응답

$.ajax({ 
     url: "/nba/value_charts/" + site_id + "/" + t_date, 
     cache: true 
    }) 
    .done(function(html) { 
     $("#vr").html(html) 
     $(".value-charts").tablesorter(); 
}); 

탭이 경우는 사용자가 페이지를 새로 고침 이전에 적어도까지 가져 이상는 HTML을 사용하여 다시 클릭 한 것을 내가 지금 할 수있는 일이 있습니까 : 여기 내 스크립트의 예? 캐시가없는 경우에만 XHR 요청을해야합니다. 현재 jQuery에 내장되어 있습니까? 아니면 작동하도록 로직을 직접 작성해야합니까?

+2

: 발생의 요청을 중지하지 않는 사실, 그냥 응답을 캐시 할 수있는 브라우저를 할 수 있습니다. 요청을 다시 보내지 못하게하려면 수동으로 요청해야합니다. –

답변

1

요청을 보내지 않으려면 직접 처리해야합니다. 모든 cache: true가하는

window.ajaxCache = {}; 

// later on: 
if (!window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date]) { 
    window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date] = $.get("/nba/value_charts/" + site_id + "/" + t_date); 
} 
window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date].done(function(html) { 
    $("#vr").html(html) 
    $(".value-charts").tablesorter(); 
}); 

브라우저 그냥처럼 캐시 할 수 있도록 캐싱을 방지하기 위해 _ 매개 변수를 설정하지입니다 것 이미지, 가정 서버가 캐시 브라우저에게 헤더를 반환합니다.

이 함수 뒤에 추상적 충분히 쉽게 : 캐시를 사용

getCachableData = (function(){ 
    var ajaxCache = {}; 
    return { 
     get: function(url) {} 
      if (!ajaxCache[url]) { 
       ajaxCache[url] = $.get(url); 
      } 
      return ajaxCache[url]; 
     }, 
     clear: function(url) { 
      if (url) { 
       ajaxCache[url] = false; 
      } 
      else { 
       ajaxCache = {}; 
      } 
     } 
    }; 
})(); 

// later on... 
getCachableData.get("/nba/value_charts/" + site_id + "/" + t_date).done(function(html){ 
    $("#vr").html(html) 
    $(".value-charts").tablesorter(); 
}); 
+0

오, 이거 정말 재미있어 보여. 어떤 이유로 든 이미 탭을 방문한 후에도 여전히 XHR 요청을하고 있습니다. - 위의 코드에서 ajaxCache 해시를 검색하는 것이 아니라는 것을 알아 내려고합니다. – randombits

+0

그 버전이 더 좋습니까? –

+0

etags 아마 이것에 대한 더 나은 대안입니다. –

0

t_date은 무엇입니까?

URL에 타임 스탬프를 추가하는 경우 (cache: false의 경우) 브라우저는 모든 고유 URL/쿼리 문자열 매개 변수를 고유 한 GET 요청으로 간주하므로 항상 새 요청을 보냅니다.

요청에 대한 응답에 cache-control 헤더가 있습니까? 이 값이 no-cache으로 설정된 경우 브라우저는 매번 자원을 요청합니다.

+0

't_date'는 내 RESTFul URL의 일부입니다. 타임 스탬프가 아닌'YYYYmmdd' 형식의 날짜입니다. 캐시 목적을 위해 URL에 타임 스탬프를 수동으로 추가하지 않고 모델의 특정 상태 만 검색합니다. – randombits