Browser doesn't distinguish a partial HTML got via AJAX and a full page

Question

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:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

<layout>
<products />
</layout>

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:

Accept: */*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript
X-Requested-With: XMLHttpRequest

<products />

So, this worked fine until I added caching Cache-Control: private, max-age=3600. Initially I though I would add Vary: X-Requested-With 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.

Is there a simple way to solve this problem?

P.S. I'm using Ruby on Rails and jQuery if that matters.

Answer 1

Have your Ajax call use a different URL like /products/partial.