by Alex Rozanski

Don't depend on AJAX

Jul 12th 2009Published in Development

Dynamically loading content through the use of AJAX (xmlHttpRequests) is a common feature in most websites. Almost everywhere you go, you’ll see dynamically loaded content, in various shapes and forms, and of differing scales. To many, this is a great advantage; it is an advantage to the user, since they spend less time waiting for pages to load, since the page does not have to be refreshed. For the individual or business, this saves bandwidth, since after the initial page is loaded, only further required content is sent to the user, not the entire page.

But it’s not always a good idea to rely on AJAX to do what you want; ¬†for those who have Javascript turned off, if your website relies too heavily on dynamically loading content, then you effectively block that group of people from accessing your website. Although this is a fairly small minority of people (<5% if memory serves), especially with the prevalence and increase in the use of mobile Internet, there may be a substantial chunk of your users who are viewing your website in browsers where Javascript is not supported, or users who simply turn off Javascript for “security reasons”.

Backup Plan

In this sense it’s important that if parts of your website that rely on dynamically loading content are fundamental to the operation of your site, you include static methods of allowing the user to access that content. Twitter does this very well:

On Twitter feeds, whether that be on your profile, the homepage, or searches, there is a limit of 20 of the most recent Tweets. To see more, there is a “more” button at the bottom. If it is clicked on, then some Javascript runs which makes an AJAX request, returning more Tweets and appending them to the page. But what if Javascript is turned off?

This is worked around by actually making the “More” button a link, which has the href set to a static page representing the “page” of data that would be returned if the AJAX function was called; for example, the static page for the second page on my Twitter profile is:

http://twitter.com/perspx?max_id=2601952493&page=2&twttr=true

The function providing the AJAX method simply returns false, to prevent this static page normally being loaded; however, if Javascript is turned off, then this doesn’t run, so the user is directed to the static page.

This means that no matter whether the user has Javascript enabled or not, they are able to access the core features of the site.

Not always

Obviously, implementing static pages for certain features of your site isn’t always necessary; but if the feature allows the user to access content or data that is fundamental to the working of your site, you should. In this way you cater to a larger proportion of your users, and do not simply block them out.

No comments

Add comment

Please enter your name and comment