Ajax technology

AJAX Technology

BySAFAL

AGRAWALBy SAFAL AGRAWAL

ContentsWhy AJAX ? What is AJAX ?Technologies Used In AJAXClassic vs. AJAXWhat is ASP.NET AJAX?3-Tier Client/Server applications using AJAX. ASP. Net AJAX FrameworkCharacteristics of Conventional Web Applications Macromedia FlashReal-Life Examples of AJAX Apps

By SAFAL AGRAWAL

Why AJAX? Intuitive and natural user interaction

No clicking requiredMouse movement is a sufficient event trigger

"Partial screen update" replaces the "click, wait, & refresh" user interaction model

Only user interface elements that contain new information are updated asynchronously

The rest of the user interface remains displayed without interruption

By SAFAL AGRAWAL

What is AJAX ?

Standards-based presentation using

XHTML and CSSDynamic display and interactionUsing the Document Object ModelData Interchange and Manipulation using XML

and XSLTAsynchronous data retrieval using

XMLHttpRequestJavaScript binding everything together

By SAFAL AGRAWAL

AJAX BasicsAJAX Uses HTTP RequestsWith AJAX, your JavaScript communicates

directly with the server, through the JavaScript XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

By SAFAL AGRAWAL

Technologies Used In AJAXJavaScript

Loosely typed scripting language JavaScript function is called when an event in a page occurs Glue for the whole AJAX operation

DOMRepresents the structure of XML and HTML documentsAPI for accessing and manipulating structured documents

CSSAllows for a clear separation of the presentation style from the

content and may be changed programmatically by JavaScript

XMLHttpRequestJavaScript object that performs asynchronous interaction with the

server By SAFAL AGRAWAL

JavaScript Scripting languageDynamic and weakly typedPrototype-based with first-class functionsSemantics similar to functional languagesStandardized as ECMAScriptSupported by most modern browsersBut sometimes disabled for security reasonsAlthough standardized, browser-specific issues

existBy SAFAL AGRAWAL

DOM (Document Object Model)Object Oriented Representation for XML and

HTML documents

Based on Hierarchical (Tree) Structure

Allows programs and scripts to build documents, navigate their structure, add, modify or delete elements and contents

Provides a foundation for developing querying, filtering, transformation, rendering etc. applications on top of DOM implementations

By SAFAL AGRAWAL

CSS (Cascading Style Sheets)

Set of Formatting rules that tell the browser how to present the document

Helps to separate the content from the presentation

Reduce the download time by removing the formatting information from the document

More control over formatting than HTML

By SAFAL AGRAWAL

XMLHttpRequestA JavaScript Class that lets you make

asynchronous HTTP requests from JavaScriptMake an HTTP request from a JavaScript eventA call back JavaScript function is invoked at each

state of the HTTP request & responseFirst introduced by MS as an ActiveX objectSome XMLHttpRequest MethodsOpen:

Specify the HTTP method, URL and async/syncSend:

Initiates the request. Can also specify POST dataBy SAFAL AGRAWAL

XMLHttpRequest Properties

OnReadyStateChange - call back function for state changes

ReadyState - the current state of the HTTP callResponseText - the text result of the requestResponseXML - DOM xml object from the

requestStatus - HTTP status code of the responseStatusText - HTTP status text

By SAFAL AGRAWAL

Classic vs. AJAX

By SAFAL AGRAWAL

What is ASP.NET AJAX?

High Productivity AJAX Development FrameworkFewer concepts, fewer lines of codeApplication and UI building blocks for common

scenariosWorks/builds on Top of ASP.NET.Easy to Author, Debug, and MaintainClean separation of content, style, behavior, & codeWell integrated with design and development toolsSeamlessly integrated application modelWorks with ASP.NET pages and server controlsAllows access to ASP.NET web services & componentsStandards-Based: Works Cross-Browser!

A Framework for building Richer, moreInteractive, Standards-based Web Experiences

By SAFAL AGRAWAL

3-Tier Client/Server applications using AJAX

By SAFAL AGRAWAL

Benefits of AJAX

Desktop application “Look and Feel”Richer user interactionsImproved scalabilityIncreased responsivenessRicher application functionalityBetter end-user experiencesDecreased bandwidth utilizationMore rapid user feedback

By SAFAL AGRAWAL

ASP.Net AJAX Framework

Scenarios Mash-up and composite applications and sites Components and Gadgets (Live.com, Windows Sidebar) Powerful script framework Rich type system and class library for JavaScript

Component model and UI framework Rich client-side data access and data binding Easily integrated with server application model Easily consume web services from browser Script access to ASP.NET application services Server-side bridge to reuse 3rd party servicesBy SAFAL AGRAWAL

Server Or Client Centric?

Server-centric web sites and apps Work with existing server application model

Keep core UI/application logic on server Improve latency, interactivity, personalization

Client-centric browser applications Fully exploit DHTML in presentation tier

The DOM is back … never went away ;-)

Use AJAX for data, services, composition

Enable new immersive experiences

ASP.net AJAX provides a great framework for

both By SAFAL AGRAWAL

Client-Centric Programming Model

By SAFAL AGRAWAL

Ajax Client ArchitectureThe client architecture includes libraries for

component support, Browser compatibility, Networking, and Core services.

Client components enable rich behaviors in the browser without PostBacks

Components, which are non-visual objects that encapsulate code.

Behaviors, which extend the behavior of existing DOM elements.

Controls, which represent a new DOM element that has custom behavior.

By SAFAL AGRAWAL

Server-Centric Programming Model

By SAFAL AGRAWAL

Ajax Server ArchitectureThe server pieces that support Ajax development

consist of ASP.NET Web server controls and components that manage the UI and flow of an application.

The server pieces also manage serialization, validation, and control extensibility.

There are also ASP.NET Web services that enable you to access ASP.NET application services for forms authentication, roles, and user profiles.

Partial-page rendering, which updates regions of the page by using an asynchronous PostBack.

By SAFAL AGRAWAL

Characteristics of Conventional Web Applications

“Click, wait, and refresh” user interactionAny communication with the server forces a page

refreshSynchronous “request/response” communication

modelThe user has to wait for the responsePage-driven: Workflow is based on pagesPage-navigation logic is determined by the server

By SAFAL AGRAWAL

Ajax Application Areas Navigation & control

Easier movement within or between Websites Searching

Improved search engine capabilities Communication

Aids for human-to-human and human-to-computer interaction

Web services Ajax is useful for supporting Service-Oriented

Architectures (SOA)System tasks

Background tasks not directly apparent to the user By SAFAL AGRAWAL

Macromedia FlashDesigned for playing interactive movies Programmed with ActionScript Implementation examples

Macromedia FlexLaszlo suite (open source)

Pros:Good for vector graphics

Cons:Browser needs a Flash plug-inActionScript is proprietary and hard to debug

By SAFAL AGRAWAL

Flash vs AJAXNo plug-ins for AJAX

Flash development tools cost moneyFlash typically has slower page load timeFlash can work on older browsersActionScript doesn't have a cross

Browser IssuesFlash can access other domains if There is a crossdomain.xml file

By SAFAL AGRAWAL

Real-Life Examples of AJAX Apps

By SAFAL AGRAWAL

Google Maps

By SAFAL AGRAWAL

Key Aspects of Google MapsA user can drag the entire map by using the

mouseInstead of clicking on a button or somethingThe action that triggers the download of new

map data is not a specific click on a link but a moving the map around with a mouse

Behind the scene - AJAX is usedThe map data is requested and downloaded

asynchronously in the backgroundOther parts of the page remains the sameNo loss of operational context

By SAFAL AGRAWAL

When Not To Use Ajax

Simple navigation & controlSimple search tasksNon-Synchronizable system tasks

By SAFAL AGRAWAL

Conclusion

AJAX represents a generic application model that would enable more interactive, more responsive, and smarter Web applications. AJAX is not tied to a particular programming language, data format, or network object and is defined by two core attributes: partial screen update and asynchronous communication.

By SAFAL AGRAWAL

Bibliography

http://www.Google.comhttp://msdn.microsoft.com/en-us/library

/ee341002.aspxhttp://jquery.comhttp://www.Bing.comhttp://www.asp.nethttp://www.a jax.orghttp://en.wikip edia.org/wiki/AJAX

By SAFAL AGRAWAL

Thank You

By SAFAL AGRAWAL