3

I build a web app which uses AJAX and the HTML5 history (with a fallback for older browsers, history.js).

Only part of my app is loaded through background javascript (the part which is quite heavy and will be used most of the time). Other pages are reached by regular links and a full page reload will occur when these pages are loaded.

When I navigated the dynamic part a bit (URL changes and fits the content displayed), left it through a regular link and then hit the browsers back button, something weird happens: Only the part which was loaded in the last XHR (in my case a div containing some data) is shown without the layout and css. When I look at the source (in Chromium and FF+Firebug) the DOM only consists of the said div.

I expected that the browser either cached the DOM and other information, so it would be able to rebuild the previous page, or it would reload the last URL (the page would be shown as expected because if it isn't loaded through a XHR it will be rendered within the layout). I tried to set the cache control headers on the response to the XHR, but it didn't help.

I put together a minimal example: http://moserei.de/html5_history/

Thank you for your help!

Martin Vielsmaier
  • 191
  • 3
  • 7

1 Answers1

0

It's a conflict in names:

The original page has 2 states and occupies 2 URLs:

  1. http://moserei.de/html5_history/
  2. http://moserei.de/html5_history/xhr.html

The XHR request for http://moserei.de/html5_history/xhr.html has different response other than the original page. Now this URL http://moserei.de/html5_history/xhr.html is associated with 2 things:

  1. A state within the original URL
  2. A separated content sent through XHR

What should the browser do when it needs to fetch this URL from the cache (when you click back button)? It's hard to say. I'm not sure whether there's well defined rule in the history spec, so just try to avoid this.

Cat Chen
  • 2,387
  • 17
  • 12
  • You're right, the URL `http://moserei.de/html5_history/xhr.html` stands for two different things. But in my opinion the browser should never directly show the content loaded through a XHR. So it should try to reload it regularly, which it does when the headers on the response to the XHR forbid caching (see my own answer). – Martin Vielsmaier Sep 13 '11 at 06:47
  • 1
    What if the user get to `/xhr.html` via AJAX and then refresh the page? The user expects that the same content is shown. Thus when you use History API to switch between URLs, usually you make sure that every URL is reachable via both AJAX state change and full page request. – Cat Chen Sep 15 '11 at 10:31