AJAX is here

It's been a long time coming, but I have finally launched my first implementation of my AJAX CMS. This site.

This is a little more than just a few funky AJAX calls here and there - I have tweaked my CMS to replace almost all page requests with AJAX requests. Because this is now part of the CMS, I can roll this functionality out onto existing sites without having to do a complete rewrite.

I thought I would share a few of the "whys and hows" of doing this - what it means and where things can go wrong.

What is this AJAX stuff?

AJAX is regarded as a cheesy buzzword by some, but that doesn't matter - it's all about replacing full page fetches with partial page fetches. When you click a link, instead of loading a whole new page, only a portion of the page is downloaded. The advantage of this is speed and usability, important elements of a great website.
Anyone remember those old school forms where you select your country, and it then refreshes the whole page so show you a list of cities? Personally, I find those really annoying. The modern way of doing things is to use AJAX to refresh the city pulldown only, not the whole page.

AJAX on a whole site?

People have long toyed with the idea of using AJAX on a whole website, so clicking any link will only refresh a portion of the page. This would be good for functionality, but has a few problems of it's own. Firstly, what happens if you don't have Javascript enabled? What about Google?
Using javascript-only navigation is a disaster for SEO, so we tend to avoid this.
Other problems include the fact that bookmarks no longer work (just like with frames sites) and the back button doesn't work as expected (because you never leave the page). These issues alone are usually show-stoppers to anyone considering rolling out a full AJAX site.

Addressing the problems

I have managed to solve all of these issues, and come up with a workable solution.
Let's start with the search engine issues.


This fix is actually quite straightforward. If you are interested in getting your site indexed properly by search engines, then it has to be crawlable with javascript off. So all hyperlinks on this site are static-looking, and crawler friendly.
Next, I run a piece of javascript after the page has loaded which runs through the page and converts all the links to the javascript based links.
If you don't have javascript, then the links won't get converted, which is exactly what we want. Because the javascript links return the same content as the regular links, this can't be considered black-hat SEO.
As a nice bonus, my javascript links look almost the same as the regular links eg...
Regular Link: http://www.ragepank.com/spam-o-meter/
Javascript Link: http://www.ragepank.com/#spam-o-meter/
I consider this a plus for usability.

Bookmarks & Back Buttons

The technique is described in detail on the O'Reilly site. This is based on the RSH Framework (Really Simple History) which adds only 10kb of compressed javascript to my pages.
Simply put, It allows me to replace regular links with the hashed links (as shown above).

Javascript in content

We all know that using inline javascript is a naughty thing to be doing, but I'll have to admit some of my pages do contain this (I use inline JS extensively for obfuscating email addresses, which prevents spam).
Turns out that any functions declared inline aren't available to the DOM when they are inserted dynamically.
For now, any page that contains inline JS is loaded the old fashioned way instead of using JS.


I also found it annoying that the page scrolling doesn't reset to the top on a page request. A simple piece of script fixed that problem.

Overall thoughts

This functionality should increas the speed of the site, and make navigation easier. I'm wary that this can also introduce reliability issues, so I'll be testing the site carefully before rolling out onto other sites.
I would appreciate any thoughts or comments on this functionality - I'm going to be developing the concept further, so all comments welcome.
Digg StumbleUpon del.icio.us technorati blinklist furl reddit sphinn

Tags: ajaxseousabilityajax seo usability