SynapseIndia ASP.NET2.

0
AJAX

Tableofof
Contents
Table
Contents

What is AJAX?

What is ASP.NET2.0 AJAX?

Why use ASP.NET2.0 AJAX?

The Client and Server Pieces of ASP.NETAJAX

Installing ASP.NET AJAX

AJAX Libraries for ASP.NET

ScriptManager

Partial Page Updates

UpdatePanel Control
UpdateProgress Control
Timer Control

Tableofof
Contents
Table
Contents

ASP.NET AJAX Client Library

AJAX JavaScript Extensions
AJAX Base Class Library

ASP.NET AJAX Networking

XMLHttpRequest Object
Data Communication
JSON

Calling Web Services from Client Script

Rich AJAX Toolkit Controls & ASP.NET Futures CTP

Server and Client Reference

Whatis is
AJAX?
What
AJAX?
Ajax (asynchronous JavaScript and XML), or AJAX, is a group of interrelated web development
techniques used for creating interactive web applications or rich Internet applications

Google Suggest provides users with a list

Google Maps covers the entire planet,

of options based on keyed-in characters

though with varying degrees of granularity.

without refreshing the page.

It offers satellite pictures as well as the

usual abstract map representations.

Historyofof
AJAX?
History
AJAX?
Jesse James Garrett, co-founder and president of Adaptive
Path in 2005, coined the term Ajax and defined the
concepts behind it.

Examples

Flickr - A Yahoo! Company

Flickr is a photo storage and display program
that uses AJAX.

Gmail - Google
Gmail is an AJAX powered email system.

AJAXTechnology?
Technology?
AJAX
It refers specifically to these
technologies:

XHTML and CSS for

presentation

The Document Object

Model for dynamic
display and interaction
with data

XML and XSLT for the

interchange and

manipulation of data,
respectively

The XMLHttpRequest
object for asynchronous
communication

JavaScript to bring these

technologies together

Whatis is
ASP.NET
AJAX?
What
ASP.NET
AJAX?
ASP.NET AJAX is the name of Microsofts AJAX solution, and it refers to a set of client and
server technologies that focus on improving web development with Visual Studio

Whyuse
use
ASP.NET
AJAX?
Why
ASP.NET
AJAX?
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.

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.

TheClient
Client
and
Server
pieces
of ASP.NET
The
and
Server
pieces
of ASP.NET
AJAX AJAX

ASP.NET is built on top of the Microsoft

Internet Information Services (IIS) web
server.
ASP.NET AJAX builds on top of that and the
web services it includes. The Microsoft AJAX
Library runs in the browser to manipulate the
DOM, communicate asynchronously with the
web server, and take advantage of ASP.NET
services.

TheClient
Client
and
Server
pieces
of ASP.NET
The
and
Server
pieces
of ASP.NET
AJAX AJAX
Microsoft AJAX Library

It is a JavaScript library that works on a variety of browsers and serves to simplify JavaScript
development.
It is a type system and set of class libraries that simplify writing JavaScript to enhance the user
experience, manipulate the DOM, and communicate with the web server

ASP.NET 2.0 AJAX Extensions

These extensions build on top of the ASP.NET classes and controls and leverage the Microsoft
AJAX Library sent to the browser.

They make it easy to quickly take advantage of AJAX technologies by providing a set of
server controls.

Through a set of standard web services, ASP.NET AJAX is also able to leverage serverbased application services such as authentication and user profile storage

Installing
ASP.NET
AJAX
Installing
ASP.NET
AJAX
ASP.NET AJAX includes

Microsoft ASP.NET 2.0 AJAX Extensions, which is a server framework

The Microsoft AJAX Library, which consists of client script that runs on the browser.

To install Microsoft ASP.NET AJAX

Download the ASPAJAXExtSetup.msi installation package from the ASP.NET AJAX

Downloads Web site.

To add the ASP.NET AJAX Control Toolkit, download and install it from ASP.NET AJAX
Control Toolkit Web site.

If you have Microsoft Visual Studio 2005 installed on your computer, the installation process
installs templates for AJAX-enabled Web site projects.
It also installs an assembly (AJAXExtensionToolbox.dll) that extends the Visual Studio toolbox

AJAXLibraries
Libraries
ASP.NET
AJAX
forfor
ASP.NET
Ajax.NET Professional: Michael Schwartz developed Ajax.NET Professional as a tool primarily
used to simplify the data transport mechanism that enables a client JavaScript routine to
communicate with a server program.

Anthem.NET: Anthem.NET is a SourceForge project where users are able to download the
sources to the project. It targets ASP.NET 1.1 and ASP.NET 2.0. It has a set of server
controls that use their underlying JavaScript library to communicate with the server

DoJo: It is a client-side library for AJAX development without ties to any server technology.
DoJo has a type system for JavaScript and a function for binding script to events from

JavaScript objects or DHTML elements. One of its strengths is rich support for dynamic
script loading.

AJAXLibraries
Libraries
ASP.NET
AJAX
forfor
ASP.NET
Prototype: It has a type system for scripting in a more object-oriented way. Prototype
provides networking functionality and a method for automatically updating an HTML
element with the results of an HTTP request when given a URL.

Script.aculo.us:Script.aculo.us is built on top of the Prototype library. It includes functionality

for adding drag-and-drop support to an application. It has a lot of effects code for fading,
shrinking, moving, and otherwise animating DOM elements. Script.aculo.us also has a
slider control and a library for manipulating lists of elements.

Rico: The Rico library also builds on top of the Prototype system. It has support for adding

drag-and-drop behavior to browser DOM elements. It also has some controls to bind
JavaScript objects to DOM elements for manipulating data. Rico has constructs for
revealing and hiding portions of a page using an accordion style. It also has animation,
sizing, and fading effects prebuilt for easier use.

ScriptManager
Script
Mangager
Any AJAX library needs a component or a tool that makes some JavaScript code available on
the client. This script code represents the client infrastructure necessary for the library to
work .

AJAX libraries tend to offer a server-side, often parameterless, component that when dropped
on the page automatically outputs any required scripts. This component is generally known
as the AJAX manager or script manager

In addition to ensuring that the proper script is linked to the page, the script manager typically

Enables and supports partial page rendering,

Generates proxy code to call remotely into server-side methods and objects,

Sets up auxiliary services.

PartialPage
Page
UpdatesUpdate
Progress
Control
Partial
Updates
Update
Progress
Control
Microsoft created the UpdateProgress control to make it easy to provide visual

feedback to the user to indicate that the update is being processed. This is
something like a busy hourglass cursor in Windows applications.
using System;
using System.Web.UI;
public partial class UpdateProgress : System.Web.UI.Page
{
protected override void OnLoad(EventArgs e)
{
System.Threading.Thread.Sleep(4000);

base.OnLoad(e);
string theTime = DateTime.Now.ToLongTimeString();
for(int i = 0; i < 3; i++)
{

theTime += "<br />" + theTime;

time1.Text = theTime;
}
}

ASP.NETAJAX
AJAXClient
Client
LibraryType
System:
Class-Inheritance
ASP.NET
Library
Type
System
: Class
- Inheritance
The constructor must explicitly call initializeBase and pass itself, using the this
keyword, along with an array of the arguments to pass to the constructor of the
base type.
The call to initializeBase takes care of producing the final type with inheritance
semantics in place. The base class constructor is called with the arguments
provided.
The type system of the AJAX Library also provides some reflection functions to
explore the relationship between objects.
if (Wrox.ASPAJAX.Samples.TributeAlbum.isInstanceOfType(anotherAlbum) == true)
{

alert("anotherAlbum is a TributeAlbum");}

if (Wrox.ASPAJAX.Samples.TributeAlbum.inheritsFrom(Wrox.ASPAJAX.Samples.Album)
==true )
{

alert("TributeAlbum inherits from Album");}

Questions / Feedback

Thank You!