AJAX is one of the main techniques for web programming. The AJAX communication technique allows you to add a nice finishing touch to your application by drastically improving the performance of the operations and by seamlessly implementing a client-side type of responsiveness for server-side operations.
The core idea behind AJAX is to make the communication with the server asynchronous, so that the 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 and only when necessary, only the relevant page elements are updated. In contrast, the traditional synchronous (postback-based) communication requires a full page reload each time data is transferred to or from the server.
The postback-based data transfer leads to the following drawbacks:
Poor interactivity—The user interaction with the application is interrupted by a postback every time a server call is needed.
Ineffectiveness—The full page is rendered and transferred to the client on each postback. This process is time-consuming and traffic-intensive.
Low usability—The requirement for a full-page postback whenever the user interface changes, imposes hefty limitations on the degree of sophistication a web user interface can achieve. Before AJAX, rich and smooth interfaces with on-demand updates could only be implemented by using the Flash technology.
The following diagram shows the complete lifecycle of an AJAX-enabled web form.
1—Represents the initial request by the browser, that is, the user requests a particular URL.
5—The server processes the request and sends a response in an XML format (XML document) to the client. The response contains the data only of the page elements that need to be changed. In most cases, this data comprises of only a fraction of the total page markup.
6—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 and CSS).
The AJAX development is a complex process and poses the following requirements:
Comprehensive knowledge of the ASP.NET page lifecycle—AJAX applications typically break the normal page lifecycle and do not work properly. As a result, developers have to handle the
ViewStatemanagement, and the
EventValidationand preservation of client scripts.
The Telerik AJAX framework eliminates the AJAX development challenges. The product allows you to jump-start your AJAX development immediately as it features the Telerik Click-and-Go™ patent-pending technology:
Telerik AJAX allows you to AJAX-enable any existing or new application, regardless of its level of complexity.
You don't need detailed knowledge of AJAX.
You don't have to modify your application as you don't need to place update panels, set triggers, manually invoke AJAX requests, and the like.
Telerik UI for ASP.NET AJAX delivers the AjaxManager, AjaxPanel and AjaxLoadingPanel which handle the Ajaxification of the controls located on the pages of your project.
The AjaxPanel is a wrapper for the UpdatePanel and provides a quick way to enable AJAX for all controls on the page, or for as many are wrapped into it. The AjaxPanel is designed to enable AJAX for all Controls that are placed inside it and does not provide the option to specify Triggers for Controls that reside outside.
The AjaxManager may seem a little complicated at first, but it is simple and easy to understand once you know more about its background.
PostBack Triggers of the standard UpdatePanel are playing an important role. Therefore, Telerik has designed the AjaxManager to allow you to specify which Control to trigger the partial PostBack and update the other. When using the AjaxManager, you can update any control on the page, regardless of its location there.
Normally, you can only have one AjaxManager on a page. However, if you are using a combination of a MasterPage, a ContentPage, and UserControls, it is recommended that you utilize the AjaxManagerProxy. In this way, you can have different AJAX settings on each content page that are specific to the controls which are placed there.