Ajax - what not to do!

Since past two years, I have been involved in consulting services at my organization and have faced several queries on various technologies such as ASP.NET, Ajax.Net, MOSS, WF and C# Parser. After MOSS, Ajax.Net is one of the most queried topic. Having imparted several trainings on Ajax at various forums, I've found some common mistakes that developers do while implementing Ajax in their applications.

First, let's clear the basic question: Where Ajax?

Where Ajax?

Ajax. Ajax - not where you need beautification of page, not where you need to just hide postback, and not just when large segment of page needs to be dynamically changed.

Majority of the developer community implements Ajax at places that involve hiding of postbacks. Let us take an example. You have 4-stage registration form. After filling the first form (a ASP.Net usercontrol), the web application guides the user to second page (another user control); thereafter third and fourth. We tend to have Ajax implemented between call from the first page to second; from second to third and so on. This is wrong!

Yes, it makes the page appear great, but it is not a recommended practice. While using Ajax, ensure that not many controls are placed inside an UpdatePanel (a panel that refreshes the state of controls placed within it, based on some triggers/events)

Take a decision between Ajax UpdatePanel and Javascript. Content, that can be populated using Javascript and DOM (Document Object Model), should not be populated using Ajax.Net.

Does Ajax enhance performance?

This is a general query of the participants in my presentations. At times, Ajax does enhance the performance; but if not used wisely, it can degrade the performance too.

Let's use an UpdatePanel and place a Label that displays the current time. The code for refreshing time is written in C# (at server side.) Now this will consume lot of time. Rather, use of Javascript will help you achieve it faster. However, there are instances where you can not avoid server-side postbacks. Say, for example, you need to populate a drop-down with the cities within a state. This cascaded drop-down needs a postback and you definately wish to hide this postback.

Every time a user changes the state in a drop-down list, the city list in the other drop-down list changes. This may increase the number of hits to the server or an increased traffic/request. Its, therefore, recommended to cache similar requests on the client side.

UI beautification

Imagine a web-browser with disabled Javascript and your entire site based on Ajax. Your targeted goals will never be achieved. So too much of Ajax on your site (or a full-Ajax-enabled site) is not a good idea.

Also, too many Ajax (long) requests causing drastic changes in UI through CSS/JavaScript is not a good solution either. So a wise use of Ajax is must!

Speeeeed!

Ajax definately brings richness in application (think, password strength indicators or analog clocks) - but it makes the web application very slow.

Ajax is fast on Firefox, slow on IE and even slower on other web-browsers. Try your web application using a very slow internet connection. Try it again using a TCP/IP connection with a very high latency for each paket.

Are you connected?

Something that developers tend to forget is that an Internet Connection may not be very stable. You may be connected at a moment and disconnected at the other. There are likely chances of HTTP Error 500, if you perform Ajax Calls without checking the connection state. So before you proceed with a call, check HTTP Status Code.

Denial of Service (DOS) Attack

An Old attack, in which attacker launches multiple XMLHttpRequests, which is not desired. This increases traffic/request and may crash the website.

A simple example is to loop loading of a particular image in the site and opening multiple connections of this.

XMLHttp Vulnerability

On a non-SSL connection, XMLHttp objects are also not SSL encrypted. Data is, hence, traversing the wire is in clear text. A good solution is to use HTTPS channels where Ajax calls are made and data is sensitive.