The browser does not distinguish between partial HTML received through AJAX and the full page

Question

I have a page that can be accessed via URL / products. When I visit it in the browser, it responds with a full page in the layout. The following is a simplified example of request headers and response bodies:

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

When the user searches for javascript update results via AJAX. The results are displayed without a layout, since it takes time to render, and I don't need it:

 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 Cache-Control: private, max-age=3600 caching Cache-Control: private, max-age=3600 . Initially, I would add that the title is Vary: X-Requested-With , and the browser will highlight two answers. However, when I receive / products through AJAX and then visit / products in the browser, it displays a partial AJAX response.

Is there an easy way to solve this problem?

PS I use Ruby on Rails and jQuery, if that matters.

Answer 1

Ask your Ajax call to use a different url like / products / partial.

Answer 2

You should have a different url for partial results (e.g. partial = yes or something like this ...)

OR

you can get the whole page through ajax and extract only the part you want using jquery.load ().

 $("#productsContainerHolder").load("/my/products/url #productsContainer", { myParam: "beer", myParam2: "cold"}); 

$. load will call your server using the "GET" method, extract all content, extract #productsContainer from it and paste it into "#productsContainerHolder"

 <div id="productsContainerHolder"> <div id="productsContainer> ... </div> </div> 

Answer 3

This article from Steve Luscher describes a similar case, the problem was more intermittent than what you are describing. Suggested solutions:

• Cancel all AJAX requests during form submission

• Use a different URL as expected

Steve went to # 1 using cancel () in ajax requests.

You did not mention which browsers you used, there is a question related to the browser here

Answer 4

Use Vary: Accept . That should work.

Answer 5

Most likely, it’s easiest to set the “False” parameter to the “cache” Ajax method for jquery. It will automatically add timestamps in the URI to prevent caching.

This can be done with a wide application coverage with the following snippet:

 $.ajaxSetup({ cache: false }); 

If the cache matters even for a dynamic query, you can create a timestamp for yourself based on the date along with the hour.

Answer 6

Try sending a mandatory-revalidate instead of private (which is more for a proxy server).

 Cache-Control: max-age=3600, must-revalidate 

I recommend reading this article: http://www.mnot.net/cache_docs/ this may help. And also use the Mark tool http://redbot.org/ to test your results, to eliminate the local machine or isp and what not.