Back (And Forward) Button Problem in AJAX

Last time I've wrote about how to solve the bookmark problem in AJAX, this time is how to handle the back(and forward) button problem. The issue remains the same, since the page's URL doesn't change(but the content does), the back and forward button will not work as expected. To solve this, here's a general method, merely a method since the implementation depends on how the system, the requirements, and the specs you use. 1. like the previous post, you must appy the information in location.hash when you load a page. 2. make sure that the browser stores the pages with the hash, if the browser doesn't then the back and forward button will not work. Mozilla derivatives browser do this, I don't know about Internet Explorer. To push the browser to save the page with hash history, you may use a hidden iframe with nothing in it, just to get an entry in browser's history. Here's the code

<iframe src="container.html" name="container" style="display: none" ></iframe>

Whenever the state changes on the page, the container frame should be forced to load again, with the state appended to the URL.

if (window.ActiveXObject) {
  window.frames["container"].window.location.search = "?" + escape(data);
}

We use only the ActiveXObject since this only necessary in IE, mozilla saves the pages with hash info in history automatically. Last, the container frame applies the state to the main page, again, this only needed in Internet Explorer, sice the browser back button change the contents of the iframe.

window.onload = function(){
 if(location.search.length>=2){
  var data = unescape(location.search.substring(1));
  top.applyState(state);
 }
}

Yes, it's a tiring process especially when there are many different AJAX requests on the page. But it's sure worth it. Hope this helps.

Bookmark Problem in AJAX

Since AJAX applications use XMLHttpRequest calls to change the code of the page, the URL stays the same. Therefore, it's not possible to bookmark a page with AJAX applications on it. There's a way to solve this. The trick is to append data that identifies the current state of the page to the URL. And that would not be in the form of GET parameter since we dont' want to refresh the page, but in the form of hash. http://myserver/myfile.html#state The data denoted with state is used to identify the current page status. It's depending on how you use AJAX in your page. So, whenever a state of the page changes, the page's hash must be updated too (it's in location.hash javascript). Then, a code like the following will read in this hash information AFTER the page is loaded. Then the applyState() function will take care of transforming the the information in location.hash into actual content of the page.

window.onLoad = function(){
if(location.hash.length >= 2){
 var state = unescape(location.hash.substring(1));
 applyState(state);
}
};

I will give an example of the applyState later (If I have the time). But I hope you get the idea here. Sure, it increases the amount of work to be done, but it's worth it, especially for the user. But remember, putting JSON into the hash then calling eval(); could be dangerous. An attacker could exploit it to a Cross-Site scripting(XSS) attack, so always validate data before using it. Hope this helps.