CODEWITHSUNDEEP
javascripthtmlajax
Risto Novik
Risto Novik

Reputation: 8295

Concept of full ajax based page

Well I am planning to make small site with full ajax requests. Login, registration all with the async requests. Well the problem arises when user refreshes the site all the previously made action would be lost. How to prevent this, what to use ?

Upvotes: 2

Views: 276

Answers (4)

Tom
Tom

Reputation: 4180

you'll have persist the state of your page somewhere, be it in cookies(I wouldn't do that, it's not reliable) or in the users session on the server side or maybe with the html 5 local storage (can't tell you much about this; I never used it). Then when someone refreshes, there should be initialization code to initialize your page. It's a lot of work, but if you organize it well, it would certainly work.

Upvotes: 0

badunk
badunk

Reputation: 4350

Depending on implementation, it is likely that all the client-side data will be lost. If at least some of the data is persisted on the server, you can have the client re-request the data with some session token. The thinner your client, the more of your data will be on the server, thus effectively being able to completely restore the user experience to a state before the refresh.

A related issue for full ajax websites is how to handle the browser back. For an ajax-heavy site, you will want to use a javascript library such as jQuery BBQ (http://benalman.com/projects/jquery-bbq-plugin/). This library will also handle some of the issues you have with refresh I believe since it effectively tags each "state" of your application with an anchor reference.

For client data persistence, you can look at flash shared objects or javascript cookies. HTML5 will also allow people to have additional options (http://www.html5rocks.com/en/features/offline). Be careful of what you store there as web application security could be a potential issue.

Upvotes: 0

ming_codes
ming_codes

Reputation: 2922

There are multiple ways to preserve your website's state:

  1. Store info in cookie;
  2. Store info in URI hash fragment, otherwise known as deep linking;
  3. Store info in localStorage, not all browser supports this;
  4. Store info in window.history.pushState, not all browser supports this;

There are libraries that handles this for you. Backbone.js automatically handles history for you.

Can I Use is an excellent reference source to check browser feature support.

Upvotes: 1

Prasanna
Prasanna

Reputation: 11544

How about changing the URL of the page for every Ajax actions. Now Chrome, Firefox supports changing URL without page refresh. By this you can keep doing things in AJAX way and you URL will keep changing every time, however page will not be refreshed. When the user tries to refresh it manually then the current URL will help to identify the state.

More on changing URL without page refresh Check this

Upvotes: 0

Related Questions