How many times has someone passed you a url to google maps, and you've clicked on it to find you're at a completely different place to where they intended you to be? Quite often you'll be at the centre of a town, or at their house. This is because they've copied the URL out of the address bar of their browser thinking that it will take you to what they can see. This is a very sensible way for them to expect it to work. It is how they've been trained to use the web. However, in order to share a link on google maps you need to click on the "share this" button, and share the url that gives you. When you click the button, it generates a URL that encodes what you're seeing.
The browser URL getting out of sync with what you're seeing is a problem with all ajax applications - they want to update the content of the page, without triggering a page reload and all of the slowdown that entails. Sometimes it isn't just slowdown. On the site our users are playing music, and they don't want it to stop whenever they browse around to find some more to listen to. This problem isn't new to AJAX though, it's been true since the days of frames - one of the reasons that frames didn't catch on was that your browser's urlbar only contained the location of the frameset, which will point to the front page of a site, and not to the page that you're currently looking at.
We "solve" this using a complicated system of javascript. Users without javascript can't listen to music using our play/javascript based player anyway, so will not get music interrupted.
If you browse around the site, you'll see that your url ends up in the form
http://www.we7.com/#/music/blues
Can you see the "#" in there? That's an anchor in URL speak, and tells the browser that the content after it isn't part of the address of the page to request, but a location within that "page" where the content is found..
What about anchors that are used as anchors?
For example,
http://www.we7.com/help/using-we7#playing-musicMost of the time this doesn't work. Instead you just get taken to the top of the page. It does work (it some browsers) for links within the site, where we intercept links in this form, and change the javascript that loads the new location into the content frame, and once the page has loaded, we then scroll the window to the location of that element (well, not quite, as that would put that element under the player, so we in fact have to scroll to just above the element, so that the element is at the top of the part of the page that you can see).
But what if a non-javascript user (or googlebot) shares a link with a javascript user? Some sites make this just add the anchor to the end of the URL that you started on, so if someone comes to our site from a
google search for madonna, they're urls would be of the form
http://www.we7.com/artists/Madonna?artistId=95352#/about/faq
This isn't a very nice url, as it implies to people that you're sharing it with that they'll see something about madonna, even though you're shareing the FAQ page, it also leaks which page you started from (like
in the google maps case), and for non-javascript people (and google bot if this is a link on a website) will take them to the (unintended) madonna page.
Instead, if your browser supports javascript, and it gets taken to a url that isn't the root, then it'll redirect you to the root with a cookie so that the browser knows what it's supposed to put in the visible part
of the page. this front page will then render the player frame and include the page you wanted to see.
This worked quite well, but had a problem - twitter's url parser will truncate urls at any ? after the # which means that
http://www.we7.com/#/arist/Madonna?artistId=95352 becomes just
http://www.we7.com/#/arist/Madonna, which - unfortunately - our site will return a 404 to as it doesn't have the ID. The simple solution to this was to change the javascript so that it switched ? with ! in the urls in the browser, and back again when it made requests. We also had to add a server that would redirect urls with ! in, back to the ? form as people had realised that they could share
urls by just removing the "#/" from the middle.
Bingo, twitter was happy! However a lot of blogging software which didn't mind the ?s in the anchor doesn't like !. We've considered ~, but mail.app doesn't like that (WTF?? hasn't unix has
http://www.example.com/~foo/ for years?)
I think the only safe way would be to remap all the urls in the app so that there are no ?s at all and the parameters are embedded in the path, the way that rails made popular code>http
://www.we7.com/artists/95352/Madonna</code> or even
http://www.we7.com/artist/MadonnaAny better ways of doing it? Are there good sites that change the URL whilst navigating about using AJAX without this confusing system?
Does this make any sense, or is it just rambling? I should really post more often to get more practice.