Urls & Ajax-Powered Websites

Nov 18, 2010

In the early days of web development, most web sites were made up of complete HTML pages that had to be loaded and reloaded every time a request was made. This system is not very efficient as all data must be resent every time a small change is made which, in turn, affects the user experience and can increase bandwidth use and server load.

The solution to creating interactive web applications is to load content asynchronously on the client side after the page is loaded. Ajax is a group of technologies including HTML, CSS, Javascript, XML, XHttpRequest and the DOM that allows developers to create these interactive applications. It does come with drawbacks, however, that many web developers overlook.

An ajax-powered site can tell a crawler that it supports the ajax crawling scheme.

Browser History and Bookmarks

Dynamic web pages make it difficult for the user to use the browser history and bookmarking. Ajax requests do not register with the browser history so the “back” and “forward” buttons do not work as expected. The solution to these problems is simple: provide unique urls for different application states using javascript to manipulate the url. As explained at AjaxPatterns.org, “the workaround relies on fragment identifiers, those optional components of URLs that come after the hash characater (#).” Using the fragment identifier window.location.hash, a developer can use Javascript to recreate a certain state of the application, allowing the user to bookmark specific application states and even hit the back button and have the same state served up.

Using jQuery, you can do something like this:


$('a').click(function() {
    window.location.hash = '#'+$(this).attr('href');
});

Now clicking the back and forward buttons in the browser updates the hash. To recreate the page state based on the hash you can poll the hash regularly like so:


window.onload = function() {setInterval(pollHash, 250);};
var curHash = '';

function pollHash()
{
	if(window.location.hash != curHash)
	{
		curHash = window.location.hash;
		// do something with the hash
	}

}

This tells the browser to run the function pollHash() every 250ms or 4x/sec.

Crawlers

Another problem with Ajax powered sites is that without the proper logic, the site will not be crawlable by the web bots including Googlebot, because by default the bots are only crawling HTML documents. The good news is that an Ajax powered site can tell a crawler that it supports the Ajax crawling scheme. Google has provided excellent documentation on how to make an ajax powered site crawlable:

“Briefly, the solution works as follows: the crawler finds a pretty AJAX URL (that is, a URL containing a #! hash fragment). It then requests the content for this URL from your server in a slightly modified form. Your web server returns the content in the form of an HTML snapshot, which is then processed by the crawler. The search results will show the original URL.”

Use the same technique as before, only add an '!' after the hash sign.


window.location.hash = '#!'+your_custom_hash

So although ajax powered web sites have useability issues with browser history and bookmarking, with proper care and attention, a web developer can efficiently and effectively overcome these issues, as well as increase web presence of the application by making it crawable. Add this to the user experience and bandwidth benefits of AJAX and you will have a truly effecient and user-friendly web-app.