AJAX asynchronous server-client communication

Test

Ajax / AJAX / Web 2.0 Ajax (the word) :: asynchronous web technology AJAX (the acronym) :: Asynchronous Javascript and Xml Web 2.0 :: nonsense word (Tim Berners-Lee, 2006) we’ll refrain from using in this classTim Berners-Lee, 2006

Why AJAX? Provide a desktop like experience over the web Because browsers are powerful enough

Where is AJAX? Google Maps, Mail, &c Flickr Facebook Predictive text searches

Viewing / Debugging AJAX Turn on Firebug Go to the NET tab Load a page web page What you See: – A list of each GET request performed by your browser – What is a browser getting on a traditional website?

Observing AJAX requests Clear the Firebug NET pane Start doing something that causes an AJAX action to happen – Ex: start typing in the Google search bar Watch the NET pane

Parameters Sent

Headers (sent + received)

See the Response

HTTP GET & POST Get – Used by client to request data from the server Post – Used by client to send data to server

The XMLHttpRequest object Makes asynchronous http requests using JS The backbone of AJAX You can receive plain XML, HTML, JSON…what ever you want

Testing Browser Type…. if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { ajax = new ActiveXObject("Microsoft.XMLHTTP"); }

XMLHttpRequest Methods Open(mode, url, async) – Mode: GET or POST – Url: – Async (true for async, false for sync.) Send(str) – In GET mode, str=NULL – In POST mode, str is name/value pairs that you are posting to the service

Async / Synchronous Synchronous: – JS function hangs until there is a response from the server Async: – Creates the request and continues executing the next bit JS code – Creates listeners that are executed when the server responds – Is the right way to do AJAX requests

XMLHttpRequest Attributes readyState – 0: not initialized – 1: connection established – 2: request received – 3: answer in process – 4: done Status – http status…200: OK, 404: file not found, &c

XMLHttpRequest Properties responseText – Response as plain text responseXml – Response as an object (on which you may use DOM methods) onreadystatechange – Function to call when ready state changes setRequestHeader – Tell the client how to configure the outgoing http headers

GET with XMLHttpRequest var url = ‘ ajax.onreadystatechange=function() { if(ajax.readyState==4) { var disp = document.getElementById('test'); disp.innerHTML=xmlhttp.responseText } } ajax.open("GET",url,true); ajax.send(null);

POST with XMLHttpRequest var mypost = “var1=blah&var2=blahblah”; ajax.onreadystatechange=function() { if(ajax.readyState == 4) { alert(“done”); } }; ajax.open("POST", url, true); ajax.setRequestHeader("Content-Type", "application/x-www-form- urlencoded"); ajax.send(mypost);

In Class Work Create a PHP page that outputs ‘Hello World’ followed by the current time. – (as plan text, no need for,, or Create an HTML/JS page that makes an AJAX (GET) request to the PHP page above – Test for each of the readyStates, writing out to a div on the page the state number + a description of the state. – In state 4, also print out the responseText