A New AJAX Approach - Client-side Controls Invoking Web Services
Since the time we shipped our first production suite of native ASP.NET AJAX controls back in November of 2006, we've been experimenting with new ways of doing efficient incremental page updates. We felt that we had something promising on our hands with full fledged client-side controls. The ability to create high-level UI elements (menus, treeviews, grids, etc.) on the client seemed like a solid foundation to build on. Our research produced a new high-performance AJAX technique which is currently gaining quite a bit of momentum among our customers. I will explain how this technique differs from standard AJAX techniques, with comments on ease of use, performance, elegance and the available client-side features within each technique.
I highly recommend trying the live examples associated to individual AJAX techniques below. Significant performance improvements are quite visible when the same functionality is implemented using different AJAX approaches. The final example is so fast that it truly feels like a local desktop application. Overview of Common AJAX Techniques Technique 1 - Server-centric AJAX Containers (ASP.NET AJAX UpdatePanel)

The server-centric AJAX container technique is employed by the ASP.NET AJAX UpdatePanel control as well as several AJAX solutions sold by the leading 3rd party control vendors. UpdatePanels are driven entirely by ASP.NET postbacks. AJAX applications are created by wrapping postback-based ASP.NET portions of the page and specifying which triggers (server-side events) will cause certain page areas to re-render.

Ease of use: The most obvious advantage of this approach is that it is extremely easy to implement. It is really not much harder than building a vanilla postback-based ASP.NET application and then wrapping certain areas of the page with UpdatePanels. This approach is ideal for quickly adding AJAX features to existing ASP.NET applications.

Performance: The biggest downside of this approach is performance. UpdatePanels always post the entire page - including full viewstate - to the server. Even though the required AJAX update to the page is often minimal, its server-side page processing essentially takes the same resources as when doing a full postback. The response sends raw HTML back to the browser, adding kilobytes to the required network traffic to process the AJAX request.
Elegance: The server-centric AJAX container technique is fairly elegant from the implementation point of view. Page areas are cleanly wrapped by UpdatePanel instances and AJAX updates are accomplished by mapping server-side events to triggers. All AJAX magic is performed by the UpdatePanel control itself.
Features: All features exposed to the developer using the UpdatePanel control are entirely on the server side. The control was not designed to be driven by client-side logic. The server-centric approach lacks the finer level of control on the client, which is definitely needed to build sophisticated AJAX apps with hyper-responsive user interfaces.

AJAX Explorer Example:

Technique 1 - Server-centric AJAX Containers (ASP.NET AJAX UpdatePanel)
Technique 2 - Client-centric AJAX Containers (ComponentArt CallBack)
ComponentArt CallBack is similar to the UpdatePanel control in its high-level concept of acting as a generic AJAX container for ASP.NET content. Both controls allow rendering custom ASP.NET content (including server controls, user controls as well as literal content) through AJAX callbacks - without reloading the entire page.
However, ComponentArt CallBack is driven entirely by its client-side API. Developers specify exactly when a callback will be triggered and exactly which parameters will be sent to the server (CallBack doesn't post the page by default). This triggers a server-side event, where the developer has full control over what will be rendered back to the client.


Ease of use: ComponentArt CallBack is not as easy to use as the UpdatePanel control. It requires JavaScript code to initiate the callback request through the control's client-side API as well as implementing a server-side event handler to render content back to the browser. In most cases this amounts to just a few lines of code on the client and the same amount on the server.
Performance: Requests made through the CallBack control are extremely lightweight in terms of network traffic. However, each request has to go through the full page life cycle and the response typically generates HTML and sends it back to the browser.
Elegance: The CallBack control hooks into the page life cycle and exposes the native ASP.NET object for rendering (HtmlTextWriter) to the developer. While the developer needs to write custom code both on the server and the client to perform an AJAX request, the level of control that is gained makes it worthwhile in most cases.
Features: The client-centric AJAX approach exposes more capabilities to rich web applications with highly-responsive user interfaces because all AJAX request decision-making logic resides within the client-side event-driven code.
AJAX Explorer Example:

Technique 2 - Client-centric AJAX Containers (ComponentArt CallBack)
Technique 3 - Manual JavaScript Coding Against Server-side Logic (Ajax.NET, ASP.NET 3.5 Script Services)
The previous two techniques revolve around the ASP.NET page model and are essentially delivered as ASP.NET server controls. In contrast with these techniques is a pure JavaScript approach originally introduced by Michael Schwarz with his Ajax.NET library. The core idea is to provide a way to mark methods of any server-side class with the "[AjaxMethod]" attribute and then be able to invoke that method from client-side code.
A similar technique is available with ASP.NET AJAX/3.5, which makes it incredibly easy to expose a web service and invoke it directly from client-side code. Significant performance improvements of this approach over the previous two are probably the main reason for its incredible popularity within the development community.

Ease of use: Invoking server-side logic on the client is easy with Ajax.NET / ASP.NET 3.5. However, this solution assumes quite a bit of manual JavaScript coding in order to generate and update user interface elements of the page. This is why it doesn't get high marks in the "ease of use" category.
Performance: There are two important performance breakthroughs of this approach: 1) Since methods of any class can be invoked through client-side code, the server-side request processing doesn't need to go through the ASP.NET page life cycle. The client-side request hits exactly the method it needs and it receives exactly the response it needs. There is no waste of server resources. 2) The response doesn't contain HTML markup. Rather, it contains only the data requested by the client. This can reduce the network traffic required to process the AJAX request by an order of magnitude. The received data is used on the client side to generate or update user interface elements.
Elegance: All functionality included with Ajax.NET or ASP.NET 3.5 Script Services is well architected. However, the overall solution is missing a piece of the AJAX puzzle and this is the reason why this approach loses points in the "elegance" category. The fact that developers are stuck with generating the user interface layer leaves the application with quite a bit of JavaScript code to maintain.
Features: The Ajax.NET library as well as ASP.NET 3.5 Script Services are loaded with client-side features. They contain the ability to easily invoke server-side logic as well as serialize .NET objects to their JSON representations. They don't, however, have the ability to manipulate high level UI elements (menus, treeviews, grids, etc.).
AJAX 2.0 - Client-side Controls Invoking Web Services
The new AJAX approach builds on best performance practises presented in the previous technique: efficiently executing server-side logic by invoking ASP.NET 3.5 web services and only sending data over the network. However, instead of requiring manual JavaScript coding to create and manipulate user interface elements, this functionality is now built into ComponentArt Web.UI client controls.

Ease of use: High-level client controls expose API methods to invoke web services. The structure and content of those controls is automatically populated with the results returned by the web service and the update is immediately visible on the screen. Even though some client-side coding is required to create and maintain user interface elements, it is reduced from many hundreds of lines to just a handful of high-level API calls. Not as easy as using the UpdatePanel control, but pretty close.
Performance: As already stated, this approach builds on best performance practises presented in the previous technique. However, the overall performance of an application built with this new approach actually exceeds the previous one. Additional performance improvements come from extensive client-side UI generation optimizations that we've built into the ComponentArt Web.UI suite.
Elegance: A high-level description of this technique is simple and powerful: "Objects on the client (client-side controls) communicate directly with objects on the server (web services)". The server-side logic of the application is delivered as a collection of web services - without any preconceived user interface decisions. This produces a real separation of tiers and greater code reuse options. Those web services could potentially be reused by multiple types of applications: mobile, smart client, Silverlight or other ASP.NET apps.
Features: Not only is AJAX request decision-making logic in the same domain as the rest of the app, but it is transparent to it. Updating a portion of the user interface through a fast AJAX request is no different than invoking any other client-side API method.