Ajax technology
-
Upload
safal-agrawal -
Category
Technology
-
view
252 -
download
0
description
Transcript of 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