Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1

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

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 attribute function 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