6 AJAX Rules To Live By

By  on  

AJAX, or Asyncronous JavaScript And XML, has been around for a few years now. Web Developers have done some really great things with AJAX, but I've also come across some horrible uses of AJAX. I've coupled together my experience as a Web Programmer and a lowly web user and have come up with six AJAX rules to live by.

AJAX to Enhance, Not to Function

First and foremost, the important part of creating a quality website is making the site work. How? Doesn't matter, as long as the user knows it works. A typical user will even overlook loading speed if the site does what they want it to. That said, do you really want a user to be able to turn off JavaScript and have your site stop working for them? The one visit your website doesn't work for them, they're not coming back. Make everything works using standard page refreshes first, then come back and AJAXify your site.

Always Let the User Know What's Going On

There's nothing worse than clicking something and seeing nothing happen for two seconds. Users are used to click and go, or at least click and watch the progress bar move. Remember that AJAX is a relatively new technology -- if the user sees nothing happen, they believe your website is broken. I suggest using an unobtrusive message that fades in and out gracefully.

You Did It With AJAX? Cool! Who Cares?

Face it -- For most websites, 90+ percent of users don't know what AJAX is or why it's cool. I appreciate a good AJAX script, but does anyone else? Likely not. Unless you have a website geared towards Web Professionals, do your users a favor and hide your "Made Using AJAX" message. I don't care what voodoo magic you use as long as the website functions.

AJAX at the End

Delivering the web project is the number one goal, so add your AJAX functionality toward the end of the project or after the website is done. Sure, AJAX can save a page refresh, but users are used to the old-fashioned way, waiting or not. I can't imagine your customer being satisfied with "It's not done, but look at how this box gets updated without the page being refreshed!" I'll take a working, old-fashioned (actually, standard is probably a better word) website with the promise of AJAX later over a late project any day.

The Security Rules Still Apply

The URL of your AJAX may be hidden in your code so that most users don't see it, but I bet you I can find it. If it can be found, it can be exploited. Don't assume that because you made your web form or page code bulletproof that a user can't manipulate your script. Make sure to scrub the GET and POST variables before doing any AJAX script processing.

AJAX Saves Load Time...But Your JavaScript Library Doesn't

Your AJAX code saves a user a page refresh, which allows for the header, footer, and navigation to NOT be reloaded? Cool. Your JavaScript library is 80kb? Not cool. Be sure to only load your library when needed, and don't add any more code than you absolutely need for the page. Exchanging load times, in this case, isn't efficient or user-friendly.

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...


  1. Yeah… We scope for ajax but we also scope usability first. When I mean usability I mean a screen reader should be able to read the site.

  2. These comments asume that you are creating a website with some added features using Ajax. These comments do no apply when porting a desktop app to the web as you do when creating Rich Internet Applications.

    Also supporting screen-readers and browser with javascript disbled is highly overrated. Making it look wellon linux aand mac and in all main browsers should be the main concern. Only a very small percentage of internet usrlers falls in this category. Based on your target audience you should choose wetter or not to bother with in.

  3. @Arnold:

    You are correct in saying I’m gearing this article more toward websites using Ajax (hopefully) as an addition. Bear in mind that the goal of most commercial websites is making money; with this goal in mind, you sacrifice “coolness” for anything that can make you more money. You essentially want son, father, and grandfather to be able to use the site.

    If you are creating a Rich Internet App, you can, to a certain degree, control your audience or at least make them conform to the website’s requirements. Like I said though, most of the time you need to cater to the user.

    Thank you for your insight!

  4. I made a full ajax website… so I don’t follow this rules at all, but it works well and users like it. http://itbreaks.net/

  5. Jacqueline

    To David Walsh:
    Can I use your logo (the guy pointing his finger) in the employee newsletter. The title of the article is “Rules to live by at work”? I was looking for clipart and found your logo.

  6. Mike

    Awesome advice!

  7. As you had said “AJAX Saves Load Time…But Your JavaScript Library Doesn’t” i accept with most developers in my place in other places that they miss this point foolishly. People think that they are using frameworks for just the sake of ajax which is more than 100kb and they think they had done a good job and the bosses too unless somebody notifies that.

    As far as i have seen it is all about money and people (developer and bosses) doesn’t care whether they are delivering a perfect wibsite(in case of small companies) and i don’t know how the Team Leaders or Project Leaders are performing here.


    Actually i was searching for a content i read a long time back whic was WHAT YOU DONT KNOW ABOUT AJAX which tells about the max simultaneous connections created by a browser ever if you had opened n connections… and i got this page …

    Your points are to be followed. Thank you.

    Besides, if you could also experiment and publish related to what i was searching then that could be nice or if it is already there in your site then can i have the link here.

    Thank you.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!