Buzzwords drive industries and the Internet and web development is no different. If you can ‘talk the talk’ you’re going to look like a highly intellectual developer or web designer… but in the end, can you actually develop a well crafted website?

Just because you toss around the words “ajax” “soap” and “web 2.0” doesn’t mean you know how to develop a website or have any experience with the “user experience.” What a site needs is an experienced team of engineers that know when ajax is needed and how to implement a website that’s clean, clear and easy to use.

Ajax is a programming method of developing asynchronous javascript calls using an XML/HTML transport. If that explanation doesn’t make sense to you, you really don’t have any right to be tossing around the ajax keywords unless you’re trying to impress your friends.

If you’re still reading, perhaps you really want to know a bit about async javascript and aren’t just trying to learn the keywords to be ‘web 2.0′ enabled.

First, let’s look at a list of pro’s and con’s to async java.

Pros

• Fast rendering: You can request small portions of XML/HTML data.
• High Tech: People think you and your site is highly technical if it can provide ‘ajax features.’
• Asynchronous: You can access your site’s database behind the scenes without the user having to reload a page.
• Javascript based: Most browsers have javascript enabled now, so you don’t have to worry about losing a huge audience for using ‘bleeding edge technology’

Cons

• Overuse: There is such thing as overdoing a good thing.
• Lack of understanding: One that doesn’t understand the technology will ultimately fail to utilize it correctly.
• Navigational nightmares: Using ajax where it doesn’t belong may confuse the user because it doesn’t update page history.
• SEO: Search Engines can’t optimize for ajax, if they cannot crawl your site normally than you’re out of luck.

Let us tackle the bad things first, because this will be the first barrier to actually developing an async java solution. The first problem is using ajax just because you have found a good tutorial on what it does. Ajax is typically a solution looking for a problem and this is the downfall. If your site is running fine, ask yourself what will asynchronous javascript solutions do for you?

Next, the lack of understanding. Many web developers and designers want to use ajax because it can solve a critical problem, but they just don’t know how to implement it correctly (or at all). In order to write a proper async java solution you’ve got to understand three things: how HTML/XML works, how to write simple javascript and how to formulate output using PHP or some back-end dynamic page language (C#, ASP, etc.)

Ajax can only solve a problem if you’re knowledgeable enough to handle the situation. If you don’t know javascript or a back-end programming language like PHP you probably want to start there before moving to advanced techniques.

Lastly, remember that ajax will confuse almost every user that hits your site if you use it in excess or in areas of navigation. For instance, let’s assume you have a sidebar with three links: “products”, “about us”, “contact us” and you want to provide the user the ultimate user experience. Technically, the fastest way would be to fire off an async java GET request to your website to get only the products page and ‘inject’ it into the main division of your website without reloading the screen.

Genious!

Now, the user clicks “products” and, instantly, they are presented with a product list! That’s the beauty of ajax, now you’ve managed to get the user quickly to the products without having to reload a bulky page of graphics or change the state of the user’s experience, right?

Wrong. Ultimately, the user is going to use their natural instinct to navigate a website: the browser buttons. In our prior example the user was presented with the “products” page instantly, but before this they may have been on the “about us” page. Instinctively they click the ‘back’ button and… leave your site… huh? Yes, they’re gone. Poof.

How? Huh?

The scenario that played out before your eyes:

1. The user found your website and landed on the ‘about us’ page off a google search hit.
2. The user liked what you were about and clicked on your products page and it arrived instantly.
3. The user clicked ‘back’ because they thought they’d go back to the ‘about us’ page, but didn’t realize that ajax injected the products output instantly–their history doens’t show a click to the products page because the browser didn’t load a products page, javascript did.

The end result? As statistics show, you never want to lose a user from your site because they’re an impatient lot and probably won’t come back. They’ve clicked the back button and are now sitting on google search results where nine other competitors pages are listed. Good job, you lost them and the chances are they won’t return.

Lesson here? Ajax is useful in small doses but fails to provide a great user experience if it alters the way they think a site will run. Had you used ajax to render a product image on a mouse-over event but actually navigated to the products page in a standard way you could have enhanced their experience, not changed it.

Considering your users were confused in their navigational needs, imagine how a mindless web crawler is going to react? To react to a user click with javascript you’ll probably be capturing an ‘onclick’ event to fire off an async javascript request. How is googlebot going to do this? They’re going to look at your anchor tag and crawl the href that the crawler sees… not load up a javascript execution engine and start hitting ‘onclick’ events just to see what happens. You could potentially lose you web crawlers in a mindless confusion of where to go next. Don’t let this happen to you. SEO is important for a sites organic search hits (free marketing).

Now that I’ve convinced you that ajax is bad, let’s look at some of the cooler techniques. Async javascript may work exceptionally for a ‘configuration’ tool or for administrative screens for a complex website. Administrators are not ‘common users’ that hit your site on an hourly/daily/minutely basis: they exist to configure, monitor and react to situations.

Ajax can help administrators obtain the data they want quickly such as rendering a log on the screen or doing ‘real time’ logging where an ajax query executes every three seconds to updates the log output so the admin doesn’t have to click reload or do a full automatic page reload (which may take time or bring them to the ‘main’ page of a module). Updating a site every three seconds for your typical user would be a nightmare on your database during flash crowds, so we save this behavior for one or two administrative folks.

You can also use this asyncronous behavior for small portions of a website that don’t change the users expected behavior, ruin navigation or break SEO. A great example of using ajax in moderation is digg.com. When the user “diggs” a story it updates the ‘votes’ on the story seemingly instantantly! This doesn’t effect your history, nobody needs to go ‘back’ to see what the site looked like before they voted! Digg also uses ajax for the comment section of a story, as does gamestooge.com for the comments and voting poll.

Polls are great examples of ajax working its magic in a great way. Nobody expects to go ‘back’ in their browser after voting on a poll. Social networks are also finding their niche with ajax execution, jaiku and pownce use it to update your mini-blog posts on their user interface. You’re entering data into a form and clicking back in your browser won’t drastically impact the result, especially since users expect form posting to work differently than standard browsing.

Using a small portion of ajax where apropriate makes your site look a little more ‘high tech’ and ‘web 2.0′ with all the buzzwords that surround it. However, don’t use ajax or build your site around it when there are better ways to work the solution. Creating a great user experience far outweighs the need to use features that are not sensible for your problem.

Because ajax can request a small portion of a website you can quickly update portions of your site dynamically without a full page load and re-fetching of uncached portions of the site, in some cases that means your style sheets, images and any javascript.

Stay tuned for more on the technical details behind implementing a simple ajax solution with javascript code and some PHP back-end implementation.