An AJAX Restaurant

Javascript March 15, 2008

I was putting together a little presentation talking about what AJAX is and why it's useful and I was trying to think of some kind of real-world analogy to explain the benefits. I came up with the interactions you have at a restaurant between the customer and the chef.

If we have a website that only uses HTML and PHP, then we constantly have to refresh the page everytime we want to perform any action, however simple (i.e. deleting a blog post, displaying something different, submitting a form, etc.). While sometimes this is necessary for large amounts of data, it's generally a pain for the user if he/she has to sit through a page refresh to perform a simple operation.

When we go to a restaurant, we don't constantly get up from our table, walk into the kitchen, get our food and bring it back to our table. No, instead we let the chef and the waiter handle all the behind-the-scenes processing for us while we sit idle and talk or read the placemat or unscrew the salt shaker.

In case it's not obvious, we as the customer are the HTML. The kitchen and the chef is the PHP. The waiter, in this scenario, serves as our Javascript/AJAX component. He is responsible for going back and forth between us and the kitchen to bring us food and give us feedback while we remain seated. In the same way that much of Javascript's functionality doesn't even need to use AJAX and interact with the server, so does our waiter in not necessarily needing to go to the kitchen for every little thing (like bringing us coffee or an extra spoon or a cup of milk for our coffee).

While we wait for our food, we have the ability to ask the waiter for an update. Likewise, the waiter can also periodically check up on us as we go through our meal to ensure things are going well. These interactions don't require us to wait for anything - we can simply call the waiter over and ask.

When we send an AJAX call to a PHP page via Javascript, we are essentially calling a page reload on a PORTION of our page. By doing this, not only do we not have to sit through a potentially lengthy page refresh, but we can look at other things on the page while we wait. Additionally, because Javascript has the ability to alter the HTML in real-time, we can get feedback on how the process is going, either by being displayed a simple ajax loading animated gif or some kind of text display.

It's imperative along the user experience that we avoid confusion and continually allowing for feedback and keeping the page content displaying is a key way to keep users happy. And being that it's not actually a restaurant, you don't even have to leave a tip!

Other Javascript Posts