URL Navigation in an AJAX Based Website?

Question

I would like to develop a website with fully ajax navigation, but this means that users cannot share, bookmark, or go straight to certain content.

I noticed a few websites (Gmail, Thesixtyone, Youtube) are using hash tags to create custom urls for different page configurations. What is this technique called, and how can I implement this?

Answer 1

I've used hash bang approach for a fully ajax driven application with SEO. From my experience I would say it's very reliable approach for both web browser and smart phone browsers.

Here are my approach. For code simplicity I will use Jquery / Zepto code

When you need to load a different ajax page just change the URL hash using javascript.

window.location.hash = '#!page1';

Then a hash change event will fire from the javascript

$(window).on('hashchange',loadPage);

Handle that event with loadPage function

var loadPage = function(e){
    pageId = window.location.hash;

    _gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push

    if(pageId == '#!page1'){
        $.get('ajax/page1.php', function(response) {
           $('#main').html(response);
        });
    }else if(pageId == '#!page2'){
        $.get('ajax/page2.php', function(response) {
           $('#main').html(response);
        });
    }
}

By this way you can load a page by typing URL and by using link as well.

Now the SEO Part. Google and other major search engine has developed an way to crawl an ajax based website. If you use #! in your url google will replace the #! portion with '?_escaped_fragment_' and will ask you for content. for example

www.yoursite.com/#!page1 will be converted to www.yoursite.com/?_escaped_fragment_=page1

All you need to do is catch that _escaped_fragment_ as a GET parameter. If you use php the code will be like

if (isset($_GET['_escaped_fragment_'])) {           
    $fragment = $_GET['_escaped_fragment_'];

    if($fragment == 'page1')
        echo include 'ajax/page1.php'; // or use readfile method
    else if($fragment == 'page2')
        echo include 'ajax/page2.php'; // or use readfile method
}

You can also set html page title and description for each page individually by catching the _escaped_fragment_

On a separate note, you can share url in social media using #! as well. It will be parsed as a regular link with the help of _escaped_fragment_

I hope that approach will help you to cover all issues.

Answer 2

Loon into JQuery address. http://www.asual.com/jquery/address/

This does exactly what you're talking about. However, since you asked what the # means in custom URLs, I assume you're fairly new at this. JQuery address will look intimidating at first, but it's really quite easy. You should use JQuery for all your ajax handling too.

# is an anchor tag. if you do this <a name="list">This is an anchor tag</a> then add #list to the url, the page will jump to the a tag where name = list.