AJAX Developement Model

Wednesday, September 30, 2009

AJAX Development Model
We will see how AJAX development is done by adopting client centric and server centric model.

Client side page lifecycle
The client side lifecycle of a web page is made up by three stages called init, load and unload. When each stage is entered, Sys.Application fires the corresponding event (init, load or unload).

Client Framework :-
Type System
The goal of the Type System is to introduce familiar object-oriented programming concepts to JavaScript -like classes, inheritance, interfaces and event-handling. In addition, this layer also extends existing JavaScript types. For example, the String and Array types in JavaScript are both extended to provide added functionality and a familiarity to ASP.NET developers. In short, the Type System lays the groundwork for the rest of the Ajax core library.
Components layer
Built on top of the solid foundation that the Type System offers, the Components layer does a lot of the heavy lifting for the core library. Within this layer is support for JSON serialization, network communication, localization, DOM interaction and ASP.NET application services like Authentication and Profile.
Application layer
Similar to the page lifecycle in ASP.NET, this layer provides an event-driven programming model that developers can use to work with DOM elements, components and the lifecycle of an application in the browser.
HTML, JavaScript and Xml-Script
ASP.NET AJAX-enabled web pages are written in HTML, JavaScript and a new xml-based, declarative syntax called xml-script. This provides the developer with more than just one option for authoring client-side code - they can code declaratively with xml-script and imperatively with JavaScript. Elements declared in xmlscript are contained in a new script tag:
ASP.NET AJAX Service Proxies
The client framework offers the ability to call Web Services from JavaScript via a set of client-side proxies that are generated from the server. These proxies can be leveraged much like a Web Reference would in managed .NET code.
Server Framework :-

• Provide an easy-to-use, highly productive framework: The main objective here is to simplify the efforts of adding Ajax functionality to web applications. This is accomplished essentially by providing a rich client library and a comprehensive set of server controls that are easy to use and integrate into existing applications.
• Server programming model integration: Server controls provide ASP.NET developers with a familiar paradigm for developing web applications. These controls emit the JavaScript needed to Ajax-enable a page with little effort or knowledge of JavaScript and the XMLHttpRequest object.
• World-class tools and components: Components and tools built on top of the framework not only extend the framework but also provide the development community with a rich collection of tools to leverage and build upon. This also includes tools for debugging, tracing and profiling.
• Cross platform support: Support for Internet Explorer, Firefox, Safari and Opera extract away the hassle of dealing with browser differences and discrepancies.

Client Centric Development Model

• Presentation tier is driven from the client-script using DHTML and JavaScript
• Smarter and more interactive application is delivered from the server to the browser when the page is first loaded.
• Interaction between the browser application and the server is limited to retrieving only the relevant data necessary to update the page.
• The client-centric model is also ideal for mashups and applications that wish to fully exploit all the features that DHTML has to offer.

Server Centric Development Model

• The application logic and most of the user interface rationale remains on the server.
• Incremental changes for the user interface are passed down to the browser application instead of the changes being made from the client-side script.
• The difference between this model and the traditional model in ASP.NET is that only the portions of the UI that need to be rendered are passed down to the browser application, rather than the whole page.
• When working with controls like the GridView and Repeater in ASP.NET, the server-centric model offers the simplest and most reliable solution.

UpdatePanel for partial rendering
<asp:UpdatePanel ID="panel1" UpdateMode="Always Conditional" runat="server">
<ContentTemplate>
Partial Rendering
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="" EventName="click textChanged" />
</Triggers>
</asp:UpdatePanel>

AJAX Control Tool Kit
The “Ajax" Control Toolkit is a collection of samples and components that makes it easier then ever to build and consume rich client-side “Atlas” controls and extenders. The toolkit provides both ready to go samples and a powerful SDK to simplify the creation and re-use of your own custom controls and extenders.
Can be downloaded from http://ajax.asp.net/

Create your own MS AJAX web site
Download installable at http://ajax.asp.net/
Open Visual Studio
Navigate to File à New à Web Site
Select “ASP. Net AJAX Enabled Web Site”
Website created with necessary config options.