Practical Application of AJAX Web Technologies
With the expansion of the internet in the 1990's, web pages and web servers began appearing on enterprise intranets as well. This meant that a lot of business functionality was being implemented through the use of web technologies. However, user interaction through traditional web forms is clumsy and tedious due to the stateless nature of HTTP. Information entered by the user needs to be submitted to the web server, validated and - in the event that any problems are encountered - the form is once again presented to the user with error messages included. This user experience differs greatly from the quick responses experienced through a classic desktop application.
The more responsive web experience
Rich Internet Applications (RIA) - asynchronously loading the web page content - became possible with the introduction of Java and ActiveX applets, Flash and other plug-ins. This enables client-side code to load and present data after loading of the page. These solutions do however necessitate the installation of an add-on to the browser, as well as presenting security concerns. In 1999, Microsoft created the XMLHTTP ActiveX control which was incorporated into Internet Explorer 5. The control later evolved into a native XMLHttpRequest object which is accessible by scripting that allows background HTTP requests to the server. This tool is now supported by all major modern web-browsers - such as Mozilla Firefox, Opera, Apple Safari and Google Chrome - as well as the latest versions of Internet Explorer. Other possibilities include, for example, the usage of the iframe HTML element also introduced by Microsoft.
AJAX - A group of technologies
(X)HTML and Cascading Style Sheets (CSS) for the presentation
The Document Object Model (DOM) for the dynamic manipulation with the contents of a page and interaction
The XMLHttpRequest object for background, asynchronous communication with the server
XSL transformation for the display of XML data
For example, let's have a page that will compute the area of a circle from a radius provided by the user.
The triggering event for an update of the panel is the user's click on the button contained in the UpdatePanel's ContentTemplate element.
Getting more control
In the example above, the development of an application is very comfortable as almost everything is done by the ASP.NET subsystem - but the developer is bound by the means of the framework implementation and can control the actions on the page to a lesser degree. However, this is not the only way to achieve partial page updates with ASP.NET. One of the other approaches is the use of the jQuery library (with upcoming support in Visual Studio 2010 by Microsoft) and a custom HTTP handler, as follows: On an XHTML page, we can use jQuery to get events from the interaction on the page done by the user, post some data to the server and then manipulate the contents of the page to present the response from the server. In the following example the user experience is more responsive because the user does not have to click any Update button. The data is sent to the server immediately after the typing of each character. In this case, the bandwidth needed for the page update is lower, because there is no need to transfer the large amount of ViewState data.
Drawbacks and Mistakes
The power of AJAX also introduces potential dangers to design and development. The most prominent difficulties that AJAX denotes are:
Pages dynamically created with AJAX do not interact well with browsing history and bookmarking - while the contents of the page is heavily changed, the URL is not. There are some workarounds possible, for example changing the anchor portion of the URL by passing parameters as a string after the "#" character.
Security issues exist, such as sending data in clear text. The traffic between the client and the server must be handled the same way as in traditional web-based applications in order to eliminate vulnerabilities.
UI design and usability issues exist , such as inventing new UI conventions, not giving visual feedback for the user interactions, handling network drop-outs or longer loading times, etc.
Although AJAX user interfaces are harder to develop, the benefits for the users are obvious - the UI provides much faster responses and provides a desktop-like experience on the web. As with every complex technology, AJAX needs serious prototyping before deciding to apply this model to a web-based application. Nevertheless, the result of AJAX from a user perspective is worth the effort, especially for a business environment.