AJAX Overview Giuseppe Attardi Universit di Pisa AJAX

AJAX Overview Giuseppe Attardi Università di Pisa

AJAX l l l Asynchronous Java. Script 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 But came into vogue with new browsers supporting Xml. Http. Request() and broadband connections Killer Apps: Gmail and Google Maps

Google Maps • Live content refresh and manipulation without page refreshes • API for easy integration with other data sources

Flickr • Dynamic AJAX • • • “photostream” slideshows User-driven tagging User comments and permalinking RSS feeds

Ajax Requirements l DHTML capable browsers § DOM, CSS, XHTML XHR support across all browsers l Broadband connections l § AJAX-based Java. Script can take considerable bandwidth to download

Main features of AJAX The Web page hosts entire Java. Script programs l The UI is manipulated programmatically and in real-time by changing the Document Object Model l The Web page isn’t reloaded unless completely new functionality is needed l Information is accessed in the background (asynchronously) by the browser via Web services l § XML, JSON, or anything HTTP can transmit

Ajax Model Source: Garrett(2005)

Ajax Asynchronous Model Source: Garrett(2005)

The Result Pure browser software that can become Rich Interactive Application (RIA) l The Web becomes a true software platform l An open software model that has no owner l § Not vendor controlled, based on neutral, open Web standards l A significant challenge as the browser client suddenly becomes quite complex

Ajax Application Frameworks

AJAX Alternatives l IFrame § Standard HTML l Macromedia Flash § Requires a plug-in • Provided for almost every browser l Java Web Start/Applets § Requires a runtime preinstalled MS. NET, One Touch Deployment l Silverlight l § Requires a preinstalled plug-in

IFrame l Put on a page: <iframe id="buffer" style="visibility: hidden; display: none; height: 1 px“ onload=“some action"></iframe> l Fill it from a URL: <a href="date" id="display" target="buffer">Load me</a> l Action: var l=document. get. Element. By. Id('display'); var f=window. frames['buffer']. document. body; if (f. inner. HTML != '') l. inner. HTML=f. inner. HTML

AJAX Limitations l Handheld device browsers provide limited support for Ajax technologies

Implementing AJAX l To implement AJAX we need to answer three questions: § What triggers the AJAX request? • Usually a Java. Script 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 Java. Script function that gets the response and manipulates the DOM, based on the text returned

Xml. Http. Request Object (XHR) The heart of AJAX l First implemented in IE in 1997 as part of the new DHTML standard l Response comes in one of two properties: l § response. XML – Returns a DOM document (can use functions such as, get. Element. By. Id()) § response. Text – A text string (can be HTML, or even Java. Script code)

XHR: Creating function get. XMLHTTPRequest() { var xhr = null; if (window. XMLHttp. Request) { // most modern web browsers xhr = new XMLHttp. Request(); } else if (window. Active. XObject) { // Internet Explorer xhr = new Active. XObject("Microsoft. XMLHTTP"); } // else stone age web browsers return xhr; } Test it: http: //medialab. di. unipi. it/test/ajax. html

XHR: Simple RPC function rpc(url) { var args = rpc. arguments; var uri = url + '? '; if (args != null) { for (var i = 1; i < args. length; i++) { if (i > 1) uri += '&'; uri += "arg" + i + '=' + escape(args[i]); } } var x = new get. XMLHttp. Request(); x. open("GET", uri, false); x. send(null); if (x. status != 200) return null; var res = x. response. Text; delete x; return res; }

XHR: Sending the Request function send. Request(url, params, call. Back) { var req = new XMLHttp. Request(); closure req. onreadystatechange = function() { call. Back(req); }; req. open(“POST”, url, true); req. set. Request. Header("Content-Type", "application/x-www-form-urlencoded"); req. send(params); } true = asynchronous

XHR: Using a callback handler var var var READY_STATE_UNINITIALIZED = 0; READY_STATE_LOADING = 1; READY_STATE_LOADED = 2; READY_STATE_INTERACTIVE = 3; READY_STATE_COMPLETE = 4; function on. Ready. State. Change(req) { var ready = req. ready. State; var data = null; if (ready == READY_STATE_COMPLETE) { data = req. response. Text; } else { data = "loading. . . [" + ready + "]"; } //. . . do something with the data. . . }

Handling the Response l Response can be one of the following: § Formatted data (XML, other custom format) • XMLHttp. Request. response. XML • Decouples the server from presentation issues • Could perform XSLT transformation on returned XML § HTML • XMLHttp. Request. response. Text • Server generates HTML, script “injects” HTML via inner. HTML • Server is now concerned with presentation § Java. Script • XMLHttp. Request. response. Text • Use the eval() Java. Script command • Again, our server code is concerned with presentation

AJAX Concerns l Security § Same Origin Policy Browser compatibility l Accessibility l The Back button l What if Java. Script is turned off? l

Same Origin Policy l Cross-Origin Resource Sharing § Adds new HTTP headers: • Origin • Access-Control-Allow-Origin l JSONP § Send JSON data containing a <script> element which when loaded performs callback from a different domain l Web. Sockets (HTML 5)

JSONP l HTML page contains Convention: tell the server to send back code to be used for callback to do parse. Response <script type="application/javascript“ src="http: //s. com/Users/1234? callback=parse. Response"> </script> l The server at the specified URL returns code: parse. Response({"Name": "Foo", "Id": 1234, "Rank": 7}); where: {"Name": "Foo", "Id": 1234, "Rank": 7} l is the JSON data for the original request l The browser load the script and runs it, i. e. invokes parse. Response() l

Web. Sockets Protocol providing full-duplex communication channels over a single TCP connection l Uses prefix ws: // or wss: // l Included in HTML 5 l

AJAX and the Back Button Huge usability issue l Returning to the previous state may not be possible when a page is updated dynamically l Difficult to bookmark on a particular page state l

AJAX Libraries l l l l j. Query Prototype Scriptaculous Yahoo! UI Library GWT ASP. NET AJAX DOJO …

Server Side Frameworks DWR (Java) l Ruby on Rails (Ruby) l Symfony 2, Laravel (PHP) l

Direct Web Remoting

Comet Generic term for web application model in which a long-held HTTP request allows a server to push data to a browser l Implementations: l § Persistent connection § Hidden i. Frame § XMLHttp. Request

Persistent Connection HTTP 1. 0: Connection: keep-alive (< 5 -15 sec. )

RIA with Ajax

Ajax, Client/SOA, and Mashups Common Elements: l Zero footprint apps l No plug-ins or admin rights needed l Leverages Web services l Dynamic user interface l Java. Script powered l Can be made secure l With a little work, can communicate and combine data from Web services anywhere in the world l Easier with pre-built widgets, frameworks, IDEs, and Web service stacks l Gives us new Web components. . .

Ajax for Software Composition