0

This is not a Meta question.

I am trying to technically understand what principle is hidden behind the following behaviour. It's very easy to reproduce:

  1. Vote up/down anything on this page1,
  2. Click on any other link on this page,
  3. Come back by pressing the back button.

Your upvote is not there anymore as well as any AJAX activities having appeared on the page.

Why is that? Why is the browser acting like so? How could StackOverflow prevent that?

1 If you are not connected, just wait for someone else's activity on the page (new comment, answer, vote) before moving page.

Stéphane Bruckert
  • 18,252
  • 10
  • 81
  • 113
  • 1
    It’s called a _cache_ … And SO could “prevent” this by advising the browser to check for whether the document has changed every time, but is not doing so, for performance reasons. So the HTML document is seen as “still valid” for a certain amount of time, during which the browser takes it straight from its cache, without making a round-trip to the server. – CBroe Nov 16 '14 at 11:44
  • Thanks @CBroe, would you like to write a complete answer about that? – Stéphane Bruckert Nov 16 '14 at 13:11

2 Answers2

2

It’s the browser’s cache that is at play here.

Since you’re asked how SO could “prevent” this, it could be done by advising the browser to check for whether the document has changed every time. But SO not doing so, for performance reasons. So the HTML document is seen as “still valid” for a certain amount of time, during which the browser takes it straight from its cache, without making a round-trip to the server.

If you look at the HTTP response headers in your browser’s developer tools for the request your browser made for this page, you will see something like this,

Cache-Control:  public, no-cache="Set-Cookie", max-age=60

– so this HTML document is to be considered valid for 60 seconds. If you navigate away from it and back in your browser, or close the tab and reopen it from history, within that 60 seconds, the browser is supposed to take the cached version of it and display it, without checking again with the server whether or not something has changed. And since your vote did not manipulate this original HTML document (only the DOM was updated with your vote), you still get the previous vote count shown.

But if you press [F5] in your browser, the cache will be circumvented – it will request the document from SO again, and then you see your vote, because this time the updated numbers are part of the updated HTML document that SO serves you.

If you want to delve more into HTTP caching, some resources of the top of Google that seem worth a look:

Caching Tutorial for Web Authors and Webmasters

A Beginner's Guide to HTTP Cache Headers

CBroe
  • 82,033
  • 9
  • 81
  • 132
1

You are not "unvoting", you just are not seeing your vote because your browser is caching the ajax request.

If your press F12 on Chrome, click on Settings icon and then "Disable cache (while DevTools is open)", when you press back the browser will resend the request.

To prevent that you must specify on your code that you never want that specific request to be cached.

You may want to check the following post:

Prevent browser caching of jQuery AJAX call result

-

Ps. You must stay with the Console (F12) opened while doing the test.

Community
  • 1
  • 1
Pedro Moreira
  • 935
  • 5
  • 8
  • _“because your browser is caching the ajax request”_ – no, it’s caching the original HTML document. And _because_ the change in votes happens only via AJAX, it does not change the representation of the document that the browser has cached. – CBroe Nov 16 '14 at 11:46
  • Thank you @PedroMoreira. I made my own idea on how this works. Although this partially answers the question, it doesn't explain what caching is and how it works. I would like to read some more details about the `caching` of a page and how the whole thing works when AJAX is part of the game. – Stéphane Bruckert Nov 16 '14 at 13:14