What happens if grandma fires up her Packard Bell and attempts to buy some medicinal ointment from your site in IE 5?  Or, what if one of your 3rd party advertisers (likely story) causes a javascript error?  Will your page still work?  Have you ever thought of what happens when javascript is not running on your fancy AJAX pages?

Not many of us do.  But, it is still important to think about what will happen if javascript is not running in the user’s browser.  Around 5% of user’s have javascript completely turned off.  Still other’s may have security settings which disallow ajax calls or obsolete browser’s which are not supported.  Degrading your javascript gracefully can be tedious and time consuming.   However, if you follow the pattern that I present it is hardly an inconvenience at all.

Consider the following code:

   
   

Pretty simple.  We can see that when the link is clicked an ajax call is made.  The click event returns false, preventing the browser from navigating to the href location.  If Javascript is not running the browser will just navigate to the ‘/book/details’ page.

The next part is where most people might get lost.  But, if you are using a modern MVC framework (why wouldn’t you be?), then you should be fine.  Or, at the very least, you should be implementing the view decorator pattern in some form.

Basically, your controller (or page) should be able to detect whether or not the request was made via AJAX, the XMLHttpRequest object.  Most javascript libraries make this easy by adding a special request header, ‘X-Requested-With’.  If your library does not do this, you should be able to manually add the header.  By checking this header, you can easily determine whether it is AJAX you are dealing with.

In PHP:

     
     function isAjax() {
       return $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
     }
     
     $book = Book->find($id);
     
     if( !isAjax() ) {
       include('includes/header.inc');
     }
    
   echo "
   

${book[title]

${book[description]}

"; if( !isAjax() ) { include('includes/footer.inc'); }

That is pretty straightforward, but the great thing is that most MVC frameworks will do it automatically!  But, what if we want to automatically create our links.  This is easy with the jquery library.  We will create a method that will run when the page loads, and add automatically add the functionality to our links (designated with the ajaxme class).

   
   
   

Keep in mind there are many situations where it is not possible to gracefully degrade an application.  In these cases a <noscript> tag should be used to warn the user that they are missing out on additional functionality.

Tags: , , , ,