Bookmark Problem in AJAX

Saturday, June 21, 2008

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.

0 comments: