Utilizing AJAX and Javascript to enhance websites

Virtually every major website uses Javascript to enhance the usability of their pages. Javascript, in the form of AJAX (Asynchronous Javascript and XML), allows content to loaded or data to be sent without requiring a full page refresh. There are plenty of examples of this, ranging from istockphoto's login form to Drupal 7's administration interface.

These days it is, relatively speaking, a cinch to add powerful AJAX features to a website. There are many widely used and freely available Javascript libraries that can be included within a site to provide instant Javascript features and effects. The two major ones that come to mind are jQuery and ShadowBox. Take a look at these respective sites to see the type of functionality that can be created using them.

Of course, using these technologies requires a bit of knowledge about HTML and Javascript. It's not too difficult, so I would recommend that you try your hand at getting an example or two to work yourself. For example, the process to begin using Shadowbox is as follows:

  • Extract the Shadowbox package to your webserver
  • Reference and initialize it in the <HEAD> section of your HTML page wtih something like this:

    <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
    handleOversize: "drag",
    modal: true
    });

  • Add rel="shadowbox" to any link you wish to be converted to a shadowbox overlay (i.e. <a href="myimage.jpg" rel="shadowbox">My Image</a>

New Web platforms like Drupal 7 are tightly integrated with these technologies and have made clever use of them to speed up web administration and site configuration tasks. In fact, I would recommend trying out Drupal 7 just to see how proper use of AJAX can really enhance a website.

However, just because integrating powerful AJAX and Javascript features into our websites is easy doesn't mean we should use it for everything. There are a few things to consider before plastering a website with Javascript:

  • make sure you use well known Javascript libraries because different browsers behave differently and it is quite easy to break your website through script incompatibilities. Actively look for a compatibility notice on the download site to ensure you are getting something that will work for the vast majority of visitors.
  • Certain usages of AJAX are better than others - it is quite possible to really harm the intuitiveness of a website by not allowing visitors to deeplink to new webpages.
  • Certain usages of AJAX can harm a website's SEO because search engine bots can't necessarily act on AJAX in the same way a visitor can. Make sure you are not hiding vast swathes of your content from search engines by burying links within Javascript calls.

Without doubt, AJAX and Javascript can really serve to boost a website's aesthetic appeal and usability. Like most things though, it should be used sparingly and only with careful consideration beforehand.