Error. Page cannot be displayed. Please contact your service provider for more details. (6)
Link of the day - Free Macbook Air
How does AJAX work
The pursuit of a development technique like AJAX came from the need for making web applications much more usable and eliminating their key disadvantages in comparison with the desktop platform:
- Poor Interactivity – web applications require that users wait for full page reloads after each interaction with the server. During the loading time they have to stare at a blank screen, which tremendously disturbs the whole experience. Although broadband internet connections are becoming a standard, web applications are also becoming increasingly complex and "heavy" so the overall waiting time remains relatively the same.
- Unresponsiveness – classic web applications transfer the complete form data to the server, which in turn renders and sends back the full HTML markup of the page to the browser. This happens during each postback and in most cases is highly inefficient, since only a small part of the interface is actually changed. However, lots of bandwidth is consumed and the performance is significantly hindered. This leaves users with the idea that web applications are slow by nature. Even worse, the user will often find the page has scrolled to a different position, causing disorientation.
- Simplistic Interfaces – the requirement for full page postback whenever the user interface has to be changed imposes hefty limitations on the degree of sophistication of web user interfaces. Rich and smooth interfaces with on-demand update could only be implemented using Flash technology. This approach, however, is impractical for general use since it is very complex and requires a much different set of skills than those possessed by the typical web developer. It can also cause end-user issues as a plug-in is often required.
- Low Usability – if a web application reloads the whole page because the user made a new selection on a form, they will get confused. It is often the case that web applications work in a confusing and esoteric way because the web application has been built around the standard, simple view of the Internet protocols. ASP.NET meant we could build applications with more functionality more quickly, usability has a way to go yet.
AJAX was born with the idea to change all this and narrow the functional gap between the desktop and the web. The new generation of AJAX-enabled applications delivers close-to-instantaneous performance, rich interfaces and tremendously improved user experience. It opens new horizons for much closer interaction with the application and demonstrates in practice what was until recently considered impossible:
- Real-time map panning in Google Maps and Virtual Earth is just like image panning in Adobe® Photoshop®
- Folder browsing, message previewing, etc. in Microsoft® Outlook® Web Access is identical to that in the desktop version of Outlook.
- Validation checking on complex input fields can be performed by the server, without reloading the page.
- Virtual scrolling of huge tables with telerik r.a.d.grid is as fast as in Microsoft Excel®
What's interesting to know is that AJAX is not actually that new as a technology. It has been first used after Microsoft implemented Microsoft.XMLHTTP COM object that was part of The Microsoft® XML Parser distributive. As an ActiveX object in Internet Explorer 5, it was used to create the famous Outlook Web Access. You have probably seen AJAX in action for quite long in the MSDN Documentation treeview navigation. What is new actually is the name AJAX, which was widely accepted in 2005. Other labels for the same technology are Load on Demand, Asynchronous Requests, Callbacks, Out-of-band Calls, etc.
How does AJAX work?
The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated, only when this is necessary.
In contrast, the traditional synchronous (postback-based) communication would require a full page reload every time data has to be transferred to/from the server. This leads to the following negative effects:
- The user interaction with the application is interrupted every time a server call is needed, since a postback has to be made.
- The user has to wait and look at blank screen during each postback.
- The full page is being rendered and transferred to the client after each postback, which is time consuming and traffic intensive.
- Any information entered by the user will be submitted to the server, perhaps prematurely.
Let's examine complete lifecycle of an AJAX-enabled web form.
- Initial request by the browser – the user requests the particular URL.
- The server processes the request and sends a response in XML format to the client (XML document). It contains the data only of the page elements that need to be changed. In most cases this data comprises just a fraction of the total page markup.
- The AJAX engine processes the server response, updates the relevant page content or performs another operation with the new data received from the server. (HTML + CSS)