ajax overview
DESCRIPTION
AJAX Overview. Giuseppe Attardi Università di Pisa. AJAX. Asynchronous JavaScript And XML Catchy acronym coined by Jesse James Garrett of Adaptive Path (February 2005) Really a set of techniques used as far back as 1998 - PowerPoint PPT PresentationTRANSCRIPT
AJAX OverviewAJAX Overview
Giuseppe AttardiGiuseppe AttardiUniversità di PisaUniversità di Pisa
AJAXAJAX
Asynchronous JavaScript And XMLAsynchronous JavaScript And XMLCatchy acronym coined by Jesse Catchy acronym coined by Jesse
James Garrett of Adaptive Path James Garrett of Adaptive Path (February 2005)(February 2005)
Really a set of techniques used as far Really a set of techniques used as far back as 1998back as 1998
But came into vogue with new But came into vogue with new browsers supporting browsers supporting XmlHttpRequest() XmlHttpRequest() and broadband and broadband connectionsconnections
Killer Apps: Gmail and Google MapsKiller Apps: Gmail and Google Maps
Google MapsGoogle Maps
•Live content Live content refresh and refresh and manipulation manipulation without page without page refreshesrefreshes
•API for easy API for easy integration with integration with other data sourcesother data sources
FlickrFlickr
•Dynamic AJAX Dynamic AJAX “photostream” “photostream” slideshowsslideshows
•User-driven User-driven taggingtagging
•User comments User comments and and permalinkingpermalinking
•RSS feedsRSS feeds
Ajax RequirementsAjax Requirements
DHTML capable browsersDHTML capable browsers– DOM, CSS, XHTML
XHR support across all browsersXHR support across all browsers Broadband connectionsBroadband connections
– AJAX-based JavaScript can take considerable bandwidth to download
Main features of AJAXMain features of AJAX The Web page hosts entire JavaScript The Web page hosts entire JavaScript
programsprograms The UI is manipulated programmatically The UI is manipulated programmatically
and in real-time by changing the and in real-time by changing the Document Object ModelDocument Object Model
The Web page The Web page isn’t reloadedisn’t reloaded unless unless completely new functionality is neededcompletely new functionality is needed
Information is accessed Information is accessed in the backgroundin the background (asynchronously) by the browser via Web (asynchronously) by the browser via Web servicesservices– XML, JSON, or anything HTTP can transmitXML, JSON, or anything HTTP can transmit
Ajax ModelAjax Model
Source: Garrett(2005)
Ajax Asynchronous ModelAjax Asynchronous Model
Source: Garrett(2005)
The ResultThe Result
Pure browser softwarePure browser software that can become that can become Rich Interactive Application (RIA)Rich Interactive Application (RIA)
The Web becomes The Web becomes a true software a true software platformplatform
An open software modelAn open software model that has no that has no ownerowner– Not vendor controlled, based on neutral, open Not vendor controlled, based on neutral, open
Web standardsWeb standards A significant challengeA significant challenge as the browser as the browser
client suddenly becomes quite complexclient suddenly becomes quite complex
Ajax Application FrameworksAjax Application Frameworks
AJAX AlternativesAJAX Alternatives
IFrameIFrame– Standard HTML
Macromedia Flash Macromedia Flash – Requires a plug-in
• Provided for almost every browser Java Web Start/Applets Java Web Start/Applets
– Requires a runtime preinstalled MS .NET, One Touch DeploymentMS .NET, One Touch Deployment SilverlightSilverlight
– Requires a preinstalled plug-in
IFrameIFrame
Put on a page:Put on a page:<iframe id="buffer" style="visibility:hidden; display: none;
height: 1px“onload=“some action"></iframe>
Fill it from a URL:Fill it from a URL:<a href="date" id="display"
target="buffer">Load me</a> Action:Action:
var l=document.getElementById('display');var f=window.frames['buffer'].document.body;if (f.innerHTML != '') l.innerHTML=f.innerHTML
AJAX LimitationsAJAX Limitations
Handheld device browsers generally Handheld device browsers generally do not support the full range of Ajax do not support the full range of Ajax technologiestechnologies
Implementing AJAXImplementing AJAX
To implement AJAX we need to answer To implement AJAX we need to answer three questions:three questions:– What triggers the AJAX request?
• Usually a JavaScript event (onblur, onclick, etc.)– What is the server process that handles the
AJAX request and issues the response?• Some kind of URL (use a Service Locator)
– What processes the response from the server (what is the callback method)?
• A JavaScript function that gets the response and manipulates the DOM, based on the text returned
XmlHttpRequest Object (XHR)XmlHttpRequest Object (XHR)
The heart of AJAXThe heart of AJAX First implemented in IE in 1997 as part of First implemented in IE in 1997 as part of
the new DHTML standardthe new DHTML standard Response comes in one of two properties:Response comes in one of two properties:
– responseXML – Returns a DOM document (can use functions such as, getElementById())
– responseText – A text string (can be HTML, or even JavaScript code)
XHR: CreatingXHR: Creating
function getXMLHTTPRequest() { var xRequest = null; if (window.XMLHttpRequest) {
// Mozilla/Safari xRequest = new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") {
// Internet Explorer xRequest = new ActiveXObject("Microsoft.XMLHTTP")); } return xRequest;}
XHR: Simple RPCXHR: Simple RPCfunction rpc(url) {function rpc(url) { var args = rpc.arguments;var args = rpc.arguments; var uri = url + '?';var uri = url + '?'; if (args != null) {if (args != null) { for (var i = 1; i < args.length; i++) {for (var i = 1; i < args.length; i++) { if (i > 1)if (i > 1)
uri += '&';uri += '&'; uri += "arg" + i + '=' + escape(args[i]);uri += "arg" + i + '=' + escape(args[i]); }} }} var x = new getXMLHttpRequest();var x = new getXMLHttpRequest(); x.open("GET", uri, false);x.open("GET", uri, false); x.send(null);x.send(null); if (x.status != 200)if (x.status != 200) return null;return null; var res = x.responseText;var res = x.responseText; delete x;delete x; return res;return res;}}
XHR: Sending the RequestXHR: Sending the Request
function sendRequest(url, params, callBack) { var req = new XMLHttpRequest(); req.onreadystatechange =
function() { callBack(req); }; req.open(“POST”, url, true); req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded"); req.send(params); }
true = asynchronous
XHR: Using a callback handlerXHR: Using a callback handlervar READY_STATE_UNINITIALIZED = 0;var READY_STATE_LOADING = 1;var READY_STATE_LOADED = 2;var READY_STATE_INTERACTIVE = 3;var READY_STATE_COMPLETE = 4;
function onReadyStateChange(req) { var ready = req.readyState; var data = null; if (ready == READY_STATE_COMPLETE) { data = req.responseText; } else { data = "loading ...[" + ready + "]"; } // ... do something with the data ...}
Handling the ResponseHandling the Response Response can be one of the following:Response can be one of the following:
– Formatted data (XML, other custom format)•XMLHttpRequest.responseXML• Decouples the server from presentation issues• Could perform XSLT transformation on returned XML
– HTML•XMLHttpRequest.responseText• Server generates HTML, script “injects” HTML via innerHTML
• Server is now concerned with presentation– JavaScript
•XMLHttpRequest.responseText• Use the eval() JavaScript command• Again, our server code is concerned with presentation
AJAX ConcernsAJAX Concerns
SecuritySecurityBrowser compatibilityBrowser compatibilityAccessibilityAccessibilityThe Back buttonThe Back buttonWhat if JavaScript is turned off?What if JavaScript is turned off?
AJAX and the Back ButtonAJAX and the Back Button
Huge usability issueHuge usability issue Returning to the previous state may not be Returning to the previous state may not be
possible when a page is updated possible when a page is updated dynamicallydynamically
Difficult to bookmark on a particular page Difficult to bookmark on a particular page statestate
AJAX LibrariesAJAX Libraries
JQueryJQueryPrototypePrototypeScriptaculousScriptaculousYahoo! UI LibraryYahoo! UI LibraryGWTGWTASP .NET AJAXASP .NET AJAXDOJODOJO……
Server Side FrameworksServer Side Frameworks
DWRDWRRuby on RailsRuby on Rails
More Sophisticated View of AjaxMore Sophisticated View of Ajax
Ajax, Client/SOA, and MashupsAjax, Client/SOA, and MashupsCommon Elements:Common Elements: Zero footprint appsZero footprint apps No plug-ins or admin No plug-ins or admin
rights neededrights needed Leverages Web servicesLeverages Web services Dynamic user interfaceDynamic user interface JavaScript poweredJavaScript powered Can be made secureCan be made secure With a little work, can With a little work, can
communicate and combine communicate and combine data from Web services data from Web services anywhere in the worldanywhere in the world
Easier with pre-built Easier with pre-built widgets, frameworks, widgets, frameworks, IDEs, and Web service IDEs, and Web service stacksstacks
Gives us new Web Gives us new Web components...components...
Ajax for Software CompositionAjax for Software Composition