AGENDA

™Introduction and History

™Synchronous & Asynchronous Requests
™AJAX Frame Work
™Types of AJAX Frame Works
™ASP.NET AJAX
™Components of AJAX Frame work
™AJAX Installation
™Server Side Components
™Client Side Components
™AJAX Architecture
™Programmnig Models
 A J A X Introduction
• Stands for Asynchronous JavaScript
and XML
• Is a web development technique for
creating interactive web applications.
• Ajax isn’t a technology but It’s really
combination of several technologies
• Ajax is a technology to build dynamic
web pages on the client side.
• Word Ajax was coined in 2005 by Jesse
James Garrett
•
 Ajax incorporates:
• Standards-based presentation using
XHTML and CSS
• Dynamic display and interaction using
the DOM (Document Object Model)
• Data interchange and manipulation
using XML and XSLT
• Asynchronous data retrieval using
XMLHttpRequest
• JavaScript binding everything together
i.e
• “Asynchronous JavaScript + CSS + DOM
+ XMLHttpRequest”
Synchronous & Asynchronous
Architecture Comparison
Classic web application model works
• Most user actions in the interface trigger
an HTTP request back to a web server.
• The server does some processing
retrieving data, crunching numbers,
talking to various legacy systems
• then returns an HTML page to the client.
It’s a model adapted from the Web’s
original use as a hypertext medium
• Disadvantage:
•While the server is doing its thing, User
Sits Idle and waiting for the result
 Advantages Using Ajax
•Ajax web pages can appear to load
quickly since the payload coming down
is much smaller in size
•With Ajax, the HTML of the page, e.g., a
table control and related TD and TR tags
can be produced locally in the browser
and not brought down with the first
page of data. If the user clicks other
pages, only the data is brought down,
and populated into the HTML generated
in the browser.
 AJAX Framework
•An Ajax framework is a framework that
helps to develop web applications that
use Ajax, a collection of technologies
used to build dynamic web pages on the
client side.
•In the article that coined the "Ajax" term,
J.J. Garrett describes the technology as
"an intermediary...between the user and
the server.
•This Ajax engine is intended to suppress
the delays perceived by the user when a
page attempts to access the server.
Ajax Framework Contd..
• The goal of the framework is to provide
this Ajax engine and associated server
and client-side functions.
• A framework eases the work of the
Ajax programmer at two levels:
• on the client side, it offers JavaScript
functions to send requests to the server.
• On the server side, it processes the
requests, searches for the data, and
transmits them to the browser.
 List of Ajax Frameworks
•JavaScript
• JavaScript Frameworks are browser-side
frameworks very commonly used in Ajax
development. There are hundreds of
JavaScript frameworks available
• Backbase: an Enterprise Ajax Framework for
creating Rich Internet Applictions
• Dojo Toolkit, an Open Source DHTML toolkit
written in JavaScript
• Ext (javascript library), a library that extends
Prototype, Jquery and YUI
List of Ajax Frameworks Contd…
• jQuery, a JavaScript framework that
provides an Ajax framework and other
utilities
• Mootools, a compact and modular
JavaScript framework best known for
its visual effects and transitions
• Prototype, a JavaScript framework that
provides Ajax and other utilities
List of Ajax Frameworks Contd...
• Script.aculo.us, Used with the Prototype
Framework, mainly for animations and
interface development
• Yahoo! UI Library, a set of utilities and controls,
for building richly interactive web applications
using techniques such as DOM scripting, DHTML
and Ajax
List of Ajax Frameworks Contd...
•C++
• Wt (witty) is a WebToolkit, allowing
programmers to write code in C++ (without
real knowledge of Ajax), generating content
rich Ajax GUI. OpenSource Licence.
•Java
• Backbase Enterprise AJAX for JSF (Java
Server Faces)
• Echo a Java framework for AJAX Servlets
• Google Web Tool Kit a wedgelet Library with
Java to Java Script Compiler
• DWR Direct Web Remoting
List of Ajax Frameworks Contd...
.NET
• AJAX.NET Professional (http://www.ajaxpro.info)
• http://www.codeplex.com/AjaxPro
• ASP.NET AJAX (Previously Known as ATLAS)
•PHP
• SAJAX is a PHP Frame work with lot of
functions, easy to integrate.
• TigerMouse is a modern AJAX driven MVC
framework for Web Applications
development
• Xajax uses only XML Format on the Server
side
 ASP.NET AJAX
• Microsoft ASP.NET AJAX enables you to
quickly create Web pages that include a
rich user experience with responsive and
familiar user interface (UI) elements.
• ASP.NET AJAX provides client-script
libraries that incorporate cross-browser
ECMAScript (JavaScript) and dynamic
HTML (DHTML) technologies, and it
integrates them with the ASP.NET 2.0
server-based development platform.
ASP.NET AJAX Contd...
• By using ASP.NET AJAX, you can
improve the user experience and the
efficiency of your Web applications.
• ASP.NET AJAX enables you to build rich
Web applications that have many
advantages over Web applications that
are completely server-based.
ASP.NET AJAX Contd...
ASP.NET AJAX applications offer:
• Improved efficiency by performing
significant parts of a Web page's
processing in the browser.
• Familiar UI elements such as progress
indicators, tooltips, and pop-up
windows.
• Partial-page updates that refresh only
the parts of the Web page that have
changed.
ASP.NET AJAX Contd...
• Client integration with ASP.NET
application services for forms
authentication and user profiles.
• Integration of data from different sources
through calls to Web services.
•A framework that simplifies
customization of server controls to
include client capabilities.
• Support for the most popular and
generally used browsers, which includes
Microsoft Internet Explorer, Mozilla
Firefox, and Apple Safari.
AJAX Coomponents
•Java Script
•Document Object Model (DOM)
•JSON (Java Script Object Notation)
•Cascading Style Sheets (CSS)
•XMLHttpRequest
 Java Script
•Used to perform Client side validations
•To handle Client side Events
•By embedding JavaScript in an HTML
page, parts of the Document Object Model
(DOM) within the HTML document can be
updated.
•JavaScript Microsoft AJAX Library features
•Classes
•Namespaces
•Inheritance
•Interfaces
•Enumerations
•Reflection
Document Object Model (DOM)
•The W3C Document Object Model is a
platform and language neutral interface
that allows programs and scripts to
dynamically access and update content,
structure and style of a document

•The HTML DOM is the Document Object

Model for HTML. The HTML DOM defines a
standard set of objects for HTML and a
standard way to access and manipulate
HTML documents
Document Object Model (DOM)
• The HTML DOM views HTML documents as
a tree structure of elements. All
elements, along with their text and
attributes, can be accessed and
manipulated through the DOM tree.

• The languages that can be used within

the HTML DOM to access DOM objects
are Java, JavaScript and VBScript
Document Object Model (DOM) Example
<html>
<head></head>
<body>
<form id=”loginForm”>
<input type=”text” id=”userName”/>
<input type=”submit” id=”login”
value=”Login”/>
</form>
</body>
</html>
JSON
• JSON (JavaScript Object Notation) is a
lightweight data-interchange format. It is
easy for humans to read and write
• It is easy for machines to parse and
generate. It is based on a subset of the
JavaScript Programming Language.
• The JSON format is introduced by
Douglas Crockford in the year 1999.
• The official Internet media type for JSON
is application/json. The JSON file
extension is .json.
JSON
• In December 2005, Yahoo! began
offering some of its Web Services
optionally in JSON. Google started
offering JSON feeds for its GData web
protocol in December 2006.
• JSON text SHALL be encoded in Unicode.
The default encoding is UTF-8.
• A JSON parser transforms a JSON text
into another representation.
JSON
JSON's basic types are
•Number (integer, real, or floating point)
•String (double-quoted Unicode with
backslash escapement)
•Boolean (true and false)
•Array (an ordered sequence of values,
comma-separated and enclosed in
square brackets)
•Object (collection of key/value pairs,
comma-separated and enclosed in curly
brackets)
•null
JSON
• JavaScript Object Notation (JSON) is a
text format for the serialization of
structured data. It is derived from the
object literals of JavaScript.
• JSON is a text format that is completely
language independent but uses
conventions that are familiar to
programmers of the C-family of
languages, including C, C++, C#, Java,
JavaScript, Perl, Python, and many
others. These properties make JSON an
ideal data-interchange language.
JSON
• JSON is a text format that is completely
language independent but uses
conventions that are familiar to
programmers of the C-family of
languages, including C, C++, C#, Java,
JavaScript, Perl, Python, and many
others. These properties make JSON an
ideal data-interchange language.
JSON
JSON is built on two structures:
•A collection of name/value pairs. In
various languages, this is realized as an
object, record, struct, dictionary, hash
table, keyed list, or associative array.

•An ordered list of values. In most

languages, this is realized as an array,
vector, list, or sequence
 CSS
• CSS stands for Cascading Style Sheets
Invented in 1997
• Styles define how to display HTML
elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0
• External Style Sheets can save you a lot of
work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into
one
 XMLHttpRequest
•The XMLHttpRequest object is the key to
AJAX. It has been available ever since
Internet Explorer 5.5 was released in July
2000, Designed by Microsoft.

•XMLHttpRequest (XHR) is an API that can

be used by JavaScript, JScript, VBScript
and other web browser scripting
languages.
 XMLHttpRequest
• XMLHttpRequest is used to transfer and
manipulate XML data to and from a web
server using HTTP, establishing an
independent connection channel
between a web page's Client-Side and
Server-Side.

• The data returned from XMLHttpRequest

calls will often be provided by back-end
databases. Besides XML, XMLHttpRequest
can be used to fetch data in other
formats, e.g. JSON or even plain text.
Methods
Method Description

abort() Cancels the current request.

getAllResponseHeaders() Returns the complete set of HTTP headers as a string.

getResponseHeader( headerName ) Returns the value of the specified HTTP header.

open( method, URL )

open( method, URL, async )
open( method, URL, async,
userName )

open( method, URL, async, Specifies the method, URL, and other optional attributes of a request.
userName, password )
The method parameter can have a value of "GET", "POST", "HEAD", "PUT", "DELETE", or a
variety of other HTTP methods listed in the W3C specification.[2]

The URL parameter may be either a relative or complete URL.

The "async" parameter specifies whether the request should be handled asynchronously or not –

"true" means that script processing carries on after the send() method, without waiting for a

response, and "false" means that the script waits for a response before continuing script
processing.

send( content ) Sends the request.

setRequestHeader( label, value ) Adds a label/value pair to the HTTP header to be sent.
Properties
Property Description
onreadystatech Specifies a reference to an event handler for an event
ange that fires at every state change.

readyState Returns the state of the object as follows

responseText Returns the response as a string.

responseXML Returns the response as XML. This property returns an XML

document object, which can be examined and parsed using
W3C DOM node tree methods and properties.
responseBody Returns the response as a binary encoded string. This
property is not part of the native XMLHttpRequest
wrapper. For this property to be available, the XHR object
must be created with an ActiveX component.
status Returns the HTTP status code as a number

statusText Returns the status as a string (e.g. "Not Found" or "OK").

AJAX Request Flow
 AJAX Request Flow Contd...
1. The JavaScript function handEvent()t will
be invoked when having an event
occurred on the HTML element.

2. In the handEvent() method,an instance

of XMLHttpRequest object is created.

3. The XMLHttpRequest object organizes an

xml message within about the status of
the HTML page,and then sends it to the
web server.
 AJAX Request Flow Contd...
4. After sending the request,the
XMLHttpRequest object listens to the
message from the web server

5. The XMLHttpRequest object parses the

message returned from the web server
and updates it into the DOM object
 Installing Microsoft ASP.NET AJAX
• Make sure that you are logged in with an
account that has Administrator rights.
• Uninstall any earlier versions of ASP.NET
AJAX. If the installation process finds an
earlier version on your computer, it will
stop.
• Download the ASPAJAXExtSetup.msi
installation package from the
www.asp.net/ajax/downloads/ Web site.
• Double-click ASPAJAXExtSetup.msi in
Windows Explorer.
Server Side
• System.Web.Extensions.dll
• System.Web.Extensions.Design.dll
• AJAXExtensionsToolbox.dll (Installs all
the Ajax Enabled Controls)
• Script Manager
• Script Manager Proxy
• Update Panel
• Update Progress
• Timer
Server Reference
Namespaces
Name Space Purpose
System.Web.Co Contains classes that enable you to programmatically
nfiguration access configuration elements of Microsoft ASP.NET 2.0
AJAX Extensions.
System.Web.Ha Contains HTTP handler classes that process HTTP requests
ndlers to a Web server.
System.Web.Scr Contains classes that provide JSON serialization and
ipt.Serialization deserialization
System.Web.Scr Provides attributes to customize Web service support for
ipt.Services using Microsoft ASP.NET 2.0 AJAX Extensions.
System.Web.UI Provides classes and interfaces that enable client-server
communication and rich UI through the use of the
Microsoft ASP.NET 2.0 AJAX Extensions.
System.Web.UI. Contains classes that can be used to extend design-time
Design support for Microsoft ASP.NET 2.0 AJAX Extensions.
 Client Side
• Microsoft AJAX Library
• The Microsoft AJAX Library includes a
rich framework to simplify client
programming.
• The Microsoft AJAX Library is a
standalone collection of the
standards-based JavaScript classes
included in ASP.NET AJAX. It is
supported by most popular browsers
and can be used to build client-
centric web applications that
integrate with any backend data
provider.
 Client Side
• Microsoft AJAX Library Provides
• Rich set of tools for managing nearly
every aspect of Client development.
• Sending Asynchronous requests using
XMLHttpRequest Object.
• Client side coding patterns familiar to
.NET developers.
• Enhances the Javascript language’s
type system and allows to write client
code using Object – Oriented
constructs like Classes and Interfaces.
Client Side
Name Spaces in Microsoft Ajax Library
Name Space Purpose
Sys Represents the root namespace for the Microsoft AJAX
Library, which contains all fundamental classes and
base classes.

Sys.Net Contains classes related to communication between

ASP.NET AJAX client applications and Web services on
the server.

Sys.Serialization Contains Classes for JSON serialization /serialization

Sys.Services Contains Classes that provide client script access in
ASP.NET AJAX to ASP.NET authentication service, profile
service, and other application services.

Sys.UI Contains Classes for working with user interface (UI),

such as controls, events and DOM
Sys.WebForms Contains Classes related to partial-page rendering
 Client Side
MS Ajax Library feature are distributed in the following
Java Script files
Name Space Purpose

MicrosoftAjax.JS This is Core Library that contains JavaScript

extensions, the type system, Classes for the
Object Oriented patterns, The
Communication Layer, Classes for creating
Components and Classes for dealing with
browser DOM

MicrosoftAjaxTimer.JS Contains the client Timer component used

by the Timer Server Control.

MicrosoftAjaxWebForms.JS Contains Classes for supporting the partial –

update mechanism used by the
UpdatePanel server control
 ASP.NET AJAX Architecture
HTML,
HTML,Script,
Script, Service
ASP.NET Service ASP.NET
ASP.NETAJAX
AJAX
ASP.NETAJAX
AJAX Proxies
Proxies ASP.NET Pages
Web
WebServices
Services
Markup
Markup ASP.NET Pages

Client
Client Script
Script Library
Library
ASP.NET
ASP.NET AJAX
AJAX Server
Server Extensions
Extensions
Controls,
Controls, Components
Components App
App Services
Services
ASP.NET Bridge
Bridge
ASP.NET AJAX
AJAX
Component
Component Model
Model and
and Server
Server Controls
Controls Web
Web Services
Services
UI
UI Framework
Framework Bridge
Bridge
Client
Client Base
Base Class
Class Library
Library
Application
Application ASP.NET
ASP.NET 2.0
2.0
Services
Services
Script
Script Core
Core Page
Page
Browser
Browser Application
Application
Framework,
Framework,
Integration
Integration Browser Services
Services
Browser Compatibility
Compatibility Server
Server Controls
Controls

Client Framework and Services Server Framework

Programming Models
• ASP.NET Ajax Supports 2 types of
Programming Models
1. Client Centric Programming Model
2. Server Centric Programming Model
Client-Centric Programming Model
•Presentation tier is driven from the client
script using DHTML
•Client sends request to the Server for the
first time.
•At First Response server delivers UI
Validations and other behaviors code
along with data
• From next time onwards request goes
from the client only for the data and
server responds with the data
Client-Centric Programming Model
Browser
Browser ASP.NET
ASP.NET Application
Application

Presentation
Presentation Initial Rendering
(HTML/CSS)
(HTML/CSS) Pages
(UI + Behavior) Pages
““Atlas”
Atlas”
Service
Service Data
UI Proxies
Proxies Web
UIBehavior
Behavior Data
Web
(Script) Services
Services
(Script)

Atlas
Atlas Script
Script Framework
Framework ASP.NET
ASP.NET
Component/UI
Component/UI Client
Client Page
Page Application
Application
Framework,
Framework, Application
Application Framework,
Framework, Services
Services
Controls
Controls Services
Services Server
Server Controls
Controls
Server-Centric Programming Model
•Application Logic and most of the UI
rationale remain on the server
•Incremental changes for the UI are
passed down to the browser application
instead of the changes being made at
client side.
 Server-Centric Programming Model
Browser
Browser ASP.NET
ASP.NET Application
Application

Initial Rendering
Pages
Pages
Presentation
(UI + Behavior)
Presentation
(HTML/CSS)
(HTML/CSS)
Input Data
UI
UIBehavior
Behavior
Updated UI + Behavior (Managed
(Managed
Code)
Code)

Atlas
Atlas Script
Script Framework
Framework ASP.NET
ASP.NET
Component/UI
Component/UI Client
Client Page
Page Application
Application
Framework,
Framework, Application
Application Framework,
Framework, Services
Services
Controls
Controls Services
Services Server
Server Controls
Controls