9. AJAX

1
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
• user fills in all the fields in a form and
  submits it
• browser generates a request, sends it to the
  server, and waits
• server receives the request, processes it, and
  sends back a response page
• browser erases the original form page
• browser displays the new page
• Major usability problems
• the user can't interact with the browser while it
  waits for the server's response
• the browser erases the old page before a new page
  appears

8
Traditional Synchronous Model
9
Ajax Application

• Ajax application uses an asynchronous model
• user fills in a field in a form that needs some
  feedback
• application creates an XMLHttpRequest object,
  uses it to send a request to the server, and
  services the user without waiting
• server receives the request, processes it and
  sends back a response
• XMLHttpRequest receives the server's response and
  invokes a callback function
• 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
Property Description
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
Method Description
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
• proxy receives the request
• forwards it to the target server
• 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
• Used 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

• Download the latest release
• from www.Dojotoolkit.org/downloads
• Extract the files from the archive file to web
  server
• Include the Dojo.js file in your web application
• place in the ltheadgt of your XHTML document
• ltscript type"text/javascript" src"path/Dojo.js"gt
  
• where path is the path to the Dojo toolkits
  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 objects currentTarget property
• contains the element that initiated the event
• dojo.date.toRfc3339()
• converts a date to yyyy-mm-dd format
• www.deitel.com/ResourceCenters/Programming/Dojo/ta
  bid/2342/Default.aspx