Permalink best practices for ajax pages

Question

Let's say I have a "report" page that can be customized via Javascript. Say I have start_date, end_date and type ("simple", or "full") that can be changed. Now I want the address bar to always contain a "permalink" of the current (customized) view, so the user can easily copy it.

If I'd do this without Ajax, I would simply use something like "/report/?start_date=2010-01-01&end_date=2010-01-31&type=full" as a permalink. But since I want to update the URL from Javascript, I need to use the anchors (#), otherwise the whole page would need to be reloaded.

Is there any best practice for how to generate permalinks in this case? I'd go with something like "/report/#start_date=2010-01-01,end_date=2010-01-31,type=full" and parse that thing in Javascript. Is there any better or more generally accepted way to deal with this?

Also, is there any better way to deal with the Javascript side rather than simply parsing everything?

Thanks.

Answer 1

If you have a group of links that point to domain resources, the best way to do is:

• leave the urls as they are (with query string like some/site?start=4&end=10)

• add a class to those links, which provide a hook for your javascript

  <a href=".." class="ajax">Some resource</a>

• plan on what data type of response they will produce (plaintext, xml, JSON, html)
• make backend decision whether to return full page or a response for ajax call
• this way the pages remain accessible

For example, in PHP you can easily look at $_SERVER variable and decide whether to return full page response or ready to ajax response:

function isXmlHttpRequest()
{
    return isset( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && 
        ($_SERVER[ 'HTTP_X_REQUESTED_WITH' ] == 'XMLHttpRequest');
}

Local page resources

html like:

<a href="#first">First</a>
<a href="#second>Second</a>

<div id="first">lorem</div>
<div id="second">ipsum</div>

You don't have to parse anything, all you have to do is just to display the correct div with id, which you will directly take from a[href].. This is considered a good practice, as your page remains accessible even with JS turned off.

Answer 2

I ended up using URLs of the form http://example.com/resource/#param1=value1&param2=value2. I wrote some Javascript code to deal with this (parse/update the URL). The code is on Github, if anyone is interested.