Recently AJAX has had a lot of hype about how it is used in the whole Web 2.0 scene. But which the great power that AJAX brings to a website, it has the capability to either destroy your site, or turn it in to something to admire!
The uses of AJAX
AJAX should be used to do one or more of the following:
Speed up delivery of content
Since only the portion of the page that is of interest needs to be loaded it means only a couple of kilobytes needs to be downloaded, instead of the whole page.
Reduce server stress
Because only a section of a page that is of interest is loaded on demand. Fewer SQL queries and fewer server side resources are required to produce just a section of a page, instead of the whole page.
Wow effect
If used with special effects (mainly when loading), it can produce a very nice looking website that has a wow effect to it!
Applications
It can be used to create application like websites! Take a look at sites such as Meebo.com for an example of a website that has done such a thing using AJAX. When we say web applications it is generally a website, that has the similar characteristics a desktop application. So generally the whole “Web Pages” thing that makes a website a website… is dropped… and no more page refreshes are needed (since applications don’t suffer from page refreshes).
How can AJAX destroy a website?
If AJAX is not used in the correct places, it can totally destroy your search engine rankings and usability with it! If they are both destroyed, then your site will start to spiral downhill.
Search Engines
Search engines can not deal with AJAX. They can not make AJAX calls and index content returned via an AJAX request. So to see how much a search engine can see, turn off JavaScript, and now try to use your site… what ever has stopped working, will not work for the search engines either!
Do NOT use any AJAX on your home page! Your home page is the most important page for search engines and if they can not see your home page, it will have a huge impact on your search engine rankings.
While there are ways of getting around such a problem, it is a lot of messing around which can be avoided completely if you use AJAX correctly.
Usability
AJAX can often destroy the “back” button. If a page refresh occurs, then the user may become lost since the whole page will go back to its default state. Users are not accustomed to the whole AJAX scene yet. The oldies out there are still getting used to pages refreshing, so seeing things popup all over the place as AJAX does it, may confuse them.
JavaScript Disabled
Do not use AJAX on content that is critical! By this I mean, say you have a notice that the user must read… do not load it via AJAX. If the user has JavaScript disabled, then the user will simply never see the critical content (terms and conditions, etc). While this is generally a flaw of JavaScript itself, I have included it here because it does still affect AJAX.
Chaining AJAX
Using to much AJAX on a page, may make a page appear slow, especially if you are chaining AJAX requests together (i.e. AJAX call, wait for it to return the data, which then calls another AJAX call). Especially if you do no include “loading” details as the user may think to link did not work, or is doing nothing. The AJAX objects required to process an AJAX request still suffer from DNS lookups, contacting the server via HTTP request and even loading the AJAX object itself has some overhead time. When all these factors are combined, you could end up with a very slow website with the user thinking “is this site working?”.
Timed AJAX
If your page is not regularly updating, mainly an issue for web applications. Then you may need to perform some kind of checks on a regular basis. Such as with the meebo example, you would need a check that checks for new contact requests. Now there are two ways you could do this. In this section of the article I will show you how NOT to do it (later I will show you a better way):
Get the server to do a check every 1 minute for a new contact request (since you don’t want someone thinking your application is broken! If someone sends you a friends request and says they have sent it, you expect the other person to receive it pretty much straight away). However, if 1000 users are on your site, you are going to have to process 1000 requests every minute, or 60,000 requests every hour! Yeah right, lets not do this one. Even though this may seem the easiest option to start with.
How you should use AJAX?
Search Engines
All the PUBLIC pages of your site i.e. what are not hidden behind a user account. You should NOT use AJAX on a page, unless it is not important to be indexed by search engines such as registration forms. If you stick to the rule of only using AJAX on protected web pages (behind user accounts, server logins, etc that search engines can’t access anyway) then you will not go far wrong.
JavaScript Disabled
Use the noscript HTML tag to inform the user that your site requires javascript to be enabled in order for your site to function. Then give them details of how to enable javascript.
Usability
Do not use AJAX for the main part of a page i.e. what the user is going to that page to initially see. For example you would not use AJAX for:
Loading forum posts when someone views a topic,
Loading the content of an article,
Or loading the sites home page.
What you should use AJAX for are objects on the page that the user MIGHT require every now and again. Using AJAX will also save the overhead of having to download all the code that would otherwise be offloaded by AJAX. For example:
A login box that can be dynamically loaded on any page,
A contacts box allowing users to select a contact from their contact list,
Verifying registration form details as the user enters the details.
As you can see, using AJAX for such tasks would in fact improve usability, and the user would not expect the browsers back button to work here anyway for things such as registration form validation.
Chaining AJAX
While it may look cool to have your whole home page load in sections using AJAX. It would be the worst thing you could do. For starters the user wants to see your home page straight away, not see loading boxes everywhere. Search engines will simply see nothing at all! Not only that, the user will make 1 http request for the page itself, then a http request for each image, js file, etc on the page, and then on top of that, an EXTRA http request for each AJAX request! So you would also be adding unnecessary http requests and server load.
I would recommend never chaining AJAX requests together. Try an complete a single task in a single AJAX request.
Timed AJAX
Use existing AJAX calls to process new contacts. If someone sends you a IM on meebo, meebo could simply check for new contacts via that same AJAX request! This straight away cuts out the additional 1000 requests every minute. The server script could also check to make sure it’s not already processed the new contact for at least 1 minute, before requiring to check again. This means if someone sends 10 messages in 1 minute, that would only result in 1 new contact request check. If no AJAX request is made at all for 1 minute, then make the timed AJAX request automatically to make sure that all the application details are up to date (check for new contact requests, check who’s online/offline, etc). This means that option 1 above would be last resort and only called if needed.
That’s covered the main issues about AJAX for now. Hope you enjoyed reading this article. Please take a second to rate it 
Kind regards,
Scott
Please login to rate coding articles.
Click here to register a free account with us.
|
