Supporting AJAX history button without going crazy

I used jQuery Address several times to support the back button in small asynchronous applications.

When all the AJAX requests do the same thing (that is, requesting a page asynchronously and replace an HTML element with the request) the implementation can be easy.

When the AJAX requests might do different things, let's say open an overlay in one case and change the content of the page entire page in another case, things become messy.

I ended up with some really crappy code for the fact that I had to go through a lot of if statements to analyze the hash value (#/somepage/someotherpage).

I always repeated to myself: there has to be a better way to do this.

Has anybody went through the same problem and can suggest a solution?

If not, check out my idea and tell me what you think.

My idea is to create an object which emulates the window.history object, but only for AJAX history, let's call it "ajaxhistory". Each time a page is requested asynchronousl开发者_C百科y something like this happens:

ajaxhistory[i] = {
    url: 'here the url',
    type: 'overlay'
    otherusefulinfo: 'whatever'
}
i++

So, for example:

if(moving back or forward){
    if(currenturl == ajaxhistory[i-1].url){
        // i'm going back
        // i'm able to know what type of action i should take thanks to
        // ajaxhistory[i-1].type and ajaxhistory[i-1].otherusefulinfo
    }
 }

I like this idea because it would make my code much easier to read, mantain and change. Suppose then I want to add new functionality... I can add a new type and I work with that, while normally I should edit a lot of crappy if statements.

What do you think? Would there be problems from a performance point of view?

Check out this work by Ben Alman

http://benalman.com/projects/jquery-bbq-plugin/

He has a plugin to help support back button.

Hope this is useful.

Bob

You can use html5 feature:
window.history.pushState({type: 'overlay'}, title, url), where first param is JS object.

You can access this object like that:

window.onpopstate = function(event) {
  alert( event.state.overlay);
}

For more information, check https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history