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 RadAjaxPanel is a wrapper for the UpdatePanel and provides a quick way to enable AJAX for all controls on the page, or for as many as wrapped into it. RadAjaxPanel 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.
RadAjaxManager may seem a little complicated at first, but it's simple and easy to understand once you know the background of it.
Since PostBack Triggers of the standard Update Panel are playing an important role, Telerik has designed the RadAjaxManager that allows 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 even regardless of their location on the page.
Normally, you can only have one RadAjaxManager on a Page and the above examples demonstrate how to configure it in different ways. However, In case of using a combination of MasterPage, Content Page and UserControls we recommend utilizing the RadAjaxManagerProxy. In this way you can have different AJAX settings on each content page, specific to the controls placed in this specific page.