1

So I run a site that uses a lot of javascript and ajax. I understand how to make users refresh their browser when the browser loads. But what happens if I need them to refresh their browser after they have loaded the site?

I want to change the ajax that is served to the client to speed up things up, but this is going to cause errors for the users who have not yet refreshed their browser.

The only solution I can come up with is that when a new version of the JavaScript file is required, the site uses a popup that asks the users to force refresh their browsers. (This won't really fix the current version, but would prevent future issues.)

I hate to use a popup for something that I could do automatically. Is there a better way to force updates for the client?

Community
  • 1
  • 1
Holtorf
  • 1,451
  • 4
  • 21
  • 41
  • 1
    Not sure what your getting at. The entire purpose of Ajax is to load content into the dom ***without*** refreshing the page. If you do want to refresh the page why not just make an http get or post request, without ajax? – Ryan Apr 15 '13 at 18:45
  • The link you gave provides several ways to break the cache when needed. Use one of them instead of refreshing the page. You seem to be worried about new "versions" of resources, which can be retrieved with refreshing the page. Changing the URL is the correct way to trick the browser into handling it, or configuring your server properly – Ian Apr 15 '13 at 18:46
  • @ryan Maybe I am phrasing this badly. The users are making lots of ajax requests to the server. But if the server behavior changes, everyone who is making requests to the server suddenly has a broken page and no indication why the page is broken. If they refreshed their browser, the site would be fixed, but the users don't know that. I want to know if there is a good way to refresh the page if the server and the client side are out of sync. – Holtorf Apr 15 '13 at 18:51
  • 1
    @ryan Imagine a server-side script that returns a time in "`hh:mm`" format. The client Ajax-fetches that time from the server every minute, parses it, and saves it somehow. Later, I update my server-side script to return a UNIX timestamp, and I correspondingly update my client-side script to expect a UNIX timestamp. **However**, any old client scripts that are still running expect a "`hh:mm`" time and will break when the server sends a UNIX timestamp instead. The OP wants to eliminate old client scripts by forcing clients to refresh and fetch the new client script. – apsillers Apr 15 '13 at 19:13

2 Answers2

1
window.location.href = "http://example.com"

replaces the current page with the one pointed to by http://example.com.

Oswald
  • 31,254
  • 3
  • 43
  • 68
  • Setting `.href` doesn't replace the page. It navigates to the new page. Calling `window.location.replace` will replace the page. – Ian Apr 15 '13 at 18:48
  • According to the [`location` MDN page](https://developer.mozilla.org/en-US/docs/DOM/window.location#Methods), the difference between `replace` and `assign` (same as setting `href` directly) is that `replace` doesn't create a new history entry in the user's Back/Forward list. – apsillers Apr 15 '13 at 19:01
  • Exactly. I was just nit-picking on your wording, but hopefully you understand the difference. Just depends on which method is needed – Ian Apr 15 '13 at 19:05
1

You sound like you are having trouble with your JavaScript getting an updated version of the data it loads through Ajax methods, is that correct? For instance, if two Ajax calls try to load 'data.txt', then the second call merely uses the cached version.

You also may be having trouble with loading new versions your script itself.

The way around both of these problems is to add a randomly-generated query string to your script source and your Ajax source.

For example, make one script that loads your main script, like this:

/* loader1.js */
document.write('<script src="mainjavascript.js?.rand=', Math.random(), '"></script>');

And in your HTML, just do

<script src="loader1.js"></script>

The same method works for JavaScript Ajax requests as well. Assuming that "client" is a new XMLHttpRequest() object, and has been properly set up with a readystatechange function and so on, then the you simply append the same query string, like this:

request = client.open('GET', 'data.txt?.rand=' + Math.random(), true);
request.send();

You may be using a library to do your Ajax requests, and so it's even easier then. Just specify the data URL as 'data.txt?.rand=' + Math.random() instead of merely 'data.txt'

Joseph Myers
  • 6,434
  • 27
  • 36
  • 2
    I think the OP's problem is that his server-side API is changing. For example, imagine a `getData.php` that used to return JSON for a data object, but after an update, it returns an array of objects. Any old client script running after the update still expects an object and it will break when it gets handed an array instead. The user needs to refresh the page so he can get the new client-side script that knows how to handle an array of objects. – apsillers Apr 15 '13 at 19:06
  • True, and that's the first solution that I suggested (first two sections of example code). – Joseph Myers Apr 15 '13 at 19:09