9. AJAX & RIA

2 Motto: O! call back yesterday, bid time return. — William Shakespeare

3 Concepts Ajax Web Applications Rich Internet Applications (RIAs) with Ajax “Raw” Ajax with XMLHttpRequest Object Ajax with XML, JSON and DOM A Full-Scale Ajax-Enabled Application Dojo Toolkit

4 Ajax Overview Usability of original web applications is bad –compared to desktop applications Rich Internet Applications (RIAs) –approximate the look, feel and usability of desktop applications –rich GUI –performance Ajax (Asynchronous JavaScript and XML) –client-side user interaction vs. server communication separate processes parallel processing –no page refreshes –asynchronous requests sent to the server via JavaScript –page updates via DOM modifications

5 Toolkits Ajax toolkits –“raw” Ajax is impractical –toolkits handle cross-browser portability problems Dojo Prototype Script.aculo.us RIA environments –rich, ready-to-use GUI –use Ajax toolkits JavaServer Faces Adobe Flex Microsoft Silverlight

6 Ajax Concept XMLHttpRequest object –manages interaction with the server –Commonly abbreviated as XHR Form of data passed between server and client –XML, or –JSON (JavaScript Object Notation) Client-side programming –XHTML –CSS –JavaScript

7 Traditional Web Application Traditional web application uses a synchronous model 1.user fills in all the fields in a form and submits it 2.browser generates a request, sends it to the server, and waits 3.server receives the request, processes it, and sends back a response page 4.browser erases the original form page 5.browser displays the new page Major usability problems 1.the user can't interact with the browser while it waits for the server's response 2.the browser erases the old page before a new page appears

8 Traditional Synchronous Model

9 Ajax Application Ajax application uses an asynchronous model 1.user fills in a field in a form that needs some feedback 2.application creates an XMLHttpRequest object, uses it to send a request to the server, and services the user without waiting 3.server receives the request, processes it and sends back a response 4.XMLHttpRequest receives the server's response and invokes a callback function 5.the callback function updates the original page without erasing it Advantages –application doesn't wait for the server's response –the user can interact with the page –callback function can update only a part of the page

10 Ajax Asynchronous Model

11 “Raw” Ajax with XMLHttpRequest To initiate an asynchronous request, the application –creates an instance of the XMLHttpRequest object –uses its open() method to set up the request if the third argument of open() is true the request is asynchronous –registers the callback function as the event handler for its onreadystatechange event –uses its send() method to send the request to the browser The callback function is called whenever the request makes some progress readyState property is progress indicator –a value from 0 to 4 –value 0: the request isn't initialized –value 4: the request is complete responseText property contains the response as text responseXML property contains the response XML

12 Sample “Raw” Ajax Code var request; // Sets up and send an asynchronous request function requestContent (url) { try { request = new XMLHttpRequest (); // create request object request.onreadystatechange = stateChange; // register event handler request.open ('GET', url, true); // set up the request request.send (null); // send the request } catch (exception) { alert ("Request failed because of: " + exception); } // Displays the response data on the page function stateChange () { if (request.readyState == 4 && request.status == 200) { document.getElementById ("content").innerHTML = request.responseText; }

13 XMLHttpRequest Properties PropertyDescription onreadystatechange Stores the callback function - the event handler that is called when the server responds readyState The request's progress. Usually used in the callback function to determine when the code that processes the response should be launched 0: the request is uninitialized; 1: the request is loading: 2 the request has been loaded; 3: data is being sent from the server: 4: the request has been completed responseText Text that is returned to the client by the server responseXML If the server's response is in XML format, this property contains the XML document, otherwise, it is empty. Can be used like a document object in JavaScript, which makes it useful for receiving complex data status HTTP status code of the request Status 200: request was successful Status 404: the requested resource was not found Status 500: there was an error while the server was processing the request statusText Additional information on the request's status. Often used to display the error to the user when the request fails

14 XMLHttpRequest Methods MethodDescription open Initializes the request. Has two mandatory parameters - method and URL. The method parameter specifies the purpose of the request - typically GET if the request is to take data from the server or POST if the request will contain a body in addition to the headers. The URL parameter specifies the address of the file on the server that will generate the response. A third optional boolean parameter specifies whether the request is asynchronous - it's set to true by default send Sends the request to the sever It has one optional parameter, data, which specifies the data to be POSTed to the server - it's s to null by default. setRequestHeader Alters the header of the request. The two parameters specify the header and its new value. It is often used to set the content-type field. getResponseHeader Returns the header data that precedes the response body. It takes one parameter, the name of the head to retrieve. This call is often used to determine the response's type, to parse the response correctly. getAllResponseHeaders Returns an array that contains all the headers that precede the response body. abort Cancels the current request.

15 XMLHttpRequest Security XMLHttpRequest object can request resources only from the server that served the web application But there is a way out: –Implement a server-side proxy 1.proxy receives the request 2.forwards it to the target server 3.sends the target server's response to the web application

16 JSON (JavaScript Object Notation) JSON represents JavaScript objects as strings –list of property names and values –comma-separated, enclosed in {} –name and value separated by : –values a string, a number, true, false, null an object in JSON format an array –list of values –comma-separated, enclosed in []

17 JSON Advantages Simpler alternative to XML –easier to write –easier to parse –requires less space U sed to pass data between the client and the server JSON can be easily converted into an JavaScript object –using eval() –but using a JSON parser is more secure

18 Dojo Toolkit JavaScript library for Ajax Free Open source Asynchronous request in a single function call Cross-browser functions that simplify partial page/DOM updates Event handling Rich GUI widgets

19 Dojo Installation 1.Download the latest release –from Extract the files from the archive file to web server 3.Include the Dojo.js file in your web application –place in the of your XHTML document where path is the path to the Dojo toolkit’s files

20 Dojo Packages Dojo is organized in packages dojo.require() –used to include specific Dojo packages dojo.io package –communication with the server dojo.events package –simplifies event handling dojo.widget package –rich GUI controls –To use a widget, set the dojoType attribute of any HTML element dojo.dom package –DOM functions portable across many browsers

21 Dojo Request dojo.io.bind() –configures and sends asynchronous requests –takes an array of parameters, formatted as a JavaScript object – url parameter: the destination of the request – handler parameter: the callback function –must have parameters type, data and event – mimetype parameter: the format of the response – load and error parameters: can replace handler parameter – load function processes successful requests – error function processes unsuccessful requests handler function is called only when request completes All the response data is sent to the callback function

22 Dojo Elements dojo.dom.insertAtIndex() –inserts an element into DOM dojo.dom.removeNode() –removes an element from the DOM dojo.widget.byId() –returns a Dojo widget dojo.events.connect() –links functions together Dojo buttons use their own buttonClick event –instead of the DOM's onClick event Event object’s currentTarget property –contains the element that initiated the event dojo.date.toRfc3339() –converts a date to yyyy-mm-dd format