title: Browser doesn't distinguish a partial HTML got via AJAX and a full page
body: <p>I've got a page that can be accessed at URL /products. When I visit it in a browser it responds with a full page within a layout. Here is a simplified example of request headers and response body: </p>
  
  <pre><code>Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  
  &lt;layout&gt;
  &lt;products /&gt;
  &lt;/layout&gt;
  </code></pre>
  
  <p>When a user does some search the javascript updates results via AJAX. The results are rendered without a layout since it takes time to render and I don't need it anyway:</p>
  
  <pre><code>Accept: */*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript
  X-Requested-With: XMLHttpRequest
  
  &lt;products /&gt;
  </code></pre>
  
  <p>So, this worked fine until I added caching <code>Cache-Control: private, max-age=3600</code>. Initially I though I would add <code>Vary: X-Requested-With</code> header and a browser would distinguish the two responses. However, when I get /products via AJAX and then visit /products in the browser it displays the partial AJAX response.</p>
  
  <p>Is there a simple way to solve this problem?</p>
  
  <p>P.S. I'm using Ruby on Rails and jQuery if that matters.</p>