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