Recovery from page refresh in Web Applications?

Question

Is there a standard or accepted way to recover from a page refresh in an Ajax web application?

My interest now lies mainly in a web app with a Java (JSP/Servlet) Back end. My page is initially rendered from a JSP and then the user progressed through the interface using javascript events.

Is there a design pattern which covers this, I'm assuming that the refresh button is someting that web developers need to worry about quite often so there should be a way of recovering from it, while maintaining state.

Answer 1

My suggestion would be keeping a state machine for each user on server side which changes states with the AJAX calls. That way on the refresh, you'll already know in which state position the user was in, allowing you to recover from this.

This might bring you a problem with scalability if you are not careful while coding it.

Another solution might be storing the state variable in the cookie (assuming the user has active cookies). And on page load, the state variable would be submitted to your web application, allowing you to recover.

Answer 2

Here's one solution we used in a project:

1. You assign a sequence number / random guid to the page eash time the user visits the page. You can put that into the get part of the url (such as yourpage.jsp?pid=1337 where 1337 is the page view sequence number)

2. When you process the AJAX requests, you maintain a "mirror" of the page state on the server side in the session or whatever mechanism you can use in JSP to store state.

3. When the user requests the page, you check if the given sequence number already exists, and if it does, it means that it's a refresh so you render the page using the mirror data you have in your session.

Answer 3

There are a number of way to handle this.

• Anchors - This is what Gmail does when it tacks on #inbox/123 which means that it should show the email id 123 with the label inbox. This is not very expressive and is useful for simple states. However, it does provide users the ability to bookmark the page and use navigate through browser history.
• Cookies - This has the advantage that this can be managed entirely on the client side. You can set cookies via Javascript and restore them via Javascript. It's cheap and doesn't require and post backs. The state information usually doesn't need to be persisted on the server because typically the state is temporary.
• Sessions - This will need you to post back the state information back to the server via AJAX as the client updates the page. If the client refreshes the page, the new page incorporates the changed state into the newly rendered page. This is quite costly in terms of performance and also complicates design but may be useful for certain applications.