1

Lecture 12 – AJAX

SFDV3011 – Advanced Web Development

Reference: http://www.w3schools.com/ajax/default.asp

What is AJAX?

Stands for Asynchronous JavaScript And XML

A range of technologies that allows to update web page content without reloading the entire page: HTML, CSS, DOM, JavaScript, XMLHttpRequest object, XML

Term coined by Jesse James Garrett in 2005

2

AJAX’s Purpose The purpose is to make the user’s experience smoother

Without Ajax, even a small change to a page requires a whole page reload (assuming that data needs to come from the server)

You can think of each page reload as a synchronisation point – all events happen in one instant burst

The problem with synchronisation is that some events could happen now, but can’t because other things aren’t ready or, there are other things that needn’t happen at all, but must because something else has to happen

Asynchronous updates allow small updates to happen when they need to

3

Examples Google Maps - zoom, pan etc.

Even clearer demonstration of the purpose is Google Suggest

Gmail mimics a desktop application

One-click bids/buys that give you instant feedback on the original page

Netflix’s tooltips

Form validation using server-side script

Basecamp’s Yellow Fade Technique

4

So What is Going On? In your browser’s scripting language, create an

XMLHttpRequest object

Specify what code will be called each time the XMLHttpRequest object’s state changes

Use the object’s open method to set up a request to the server using GET or POST

Send the request using the send method

5

XMLHttpRequest Creation

6

var xmlHttp ;function createXMLHttpRequest () {if ( window . ActiveXObject ) {xmlHttp = new ActiveXObject (" Microsoft . XMLHTTP ");} else if ( window . XMLHttpRequest ) {xmlHttp = new XMLHttpRequest ();}}

IE5 and IE6 support XMLHTTPRequest object in ActiveX

Do a Request

7

function startRequest () {createXMLHttpRequest ();xmlHttp . onreadystatechange = handleStateChange ;xmlHttp . open (" GET ", " hello . php ", true);xmlHttp . send (null);}

open method: third param sets request to be asynchronous send method: optional param for request body (including POST string)

Do Something with the Response

8

function handleStateChange () {if ( xmlHttp . readyState == 4) {

if ( xmlHttp . status == 200) {

finishAjax ();}}

} The XMLHttpRequest object has 5 possible states: 0 = uninitialised, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete. finishAjax can do something with the responseText attributefunction finishAjax () {var respStr = xmlHttp . responseText ;document . getElementById (" content "). innerHTML = respStr ;}

Communication Methods

9

Ajax obeys JavaScript’s same origin rule

Communication to the server can be query a string (GET or POST)

Could also send XML or JSON in the body

Server sends back a stream of text - could be XML or JSON (or anything really)

Advantage of XML or JSON: browser can parse it and manipulate it as an object