1. AJAX Asynchronous JavaScript & XML A short introduction

2. AJAX intro AJAX uses asynchronous data transfer (based on XMLHttpRequest ) between the browser and the web-server, allowing to –request smaller bits of information from the server than the full-reload; –request additional information from other pages where the result should be “embedded” into the current page; –execute an action on the server without moving to the next page (so if fail then you don’t have to go back: consider for example submitting data).

3. AJAX shift of client-server communication Standard method Client (Web broswer) Server We could say that pages are not connected

4. AJAX shift of client-server communication AJAX method Client (Web broswer) Server The page stays the same

5. function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4) { document.FormA.timeCtrl.value=xmlHttp.responseText; } xmlHttp.open("GET",“a.php",true); xmlHttp.send(null); } A function to be executed on call-back. Call asyncronously

6. Readystate 0 - the request is not initialized 1 - the request has been set up 2 - the request has been sent 3 - the request is in process 4 - the request is complete function() { if(xmlHttp.readyState==4) {... } }

7. Status There is also a status that can be controlled after a result is returned. It will contain either –200 - everything worked (returned) fine –or the error code, for example: 404 - the page is not found.... 500 (Internal Server Error) if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) alert(xmlHttp.responseText); else alert("Error code: " + xmlHttp.status); }

8. Response text function() { if(xmlHttp.readyState==4) {....value=xmlHttp.responseText; } responseText is data which is send back from the server. Usually it is processes somehow or appears in a certain place, therefore (usually) it doesn’t contain “ ” tags.

9. On ready state change Here a function that should be called defined. Notice that the function can be defined in differently ways accordingly to JavaSript standards An inline definition xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4) {...; } Outside definition: xmlHttp.onreadystatechange = functionA; The function is declared somewhere else

10. Calling server xmlHttp.open("GET",“a.php",true); xmlHttp.send(null); Here we have a simple example, where the first parameter defines method (as in forms), the second sets an address to be called (as an action in forms) and the third one specifies that the call should be asynchronous. Calling a server with parameters var act=“a.php” act=act + “?” + “arg1name=“ + “arg1value” act=act + “&” + “arg2name=“ + “arg2value” xmlHttp.open("GET",act,true); xmlHttp.send(null); Sends the request

11. Calling server “Post” method example: parameters are not attached to the url but is served via the send method Calling a server with parameters var act=“a.php” var param=“arg1name=“ + “arg1value” param=param + “&” + “arg2name=“ + “arg2value” xmlHttp.open("POST",act,true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.setRequestHeader("Content-length", params.length); xmlHttp.send(param);

12. XML as a response If a server posts xml <% response.contenttype="text/xml“ response.write(" ") response.write(" A ") response.write(" Leo V ") response.write(" ") %> Then the AJAX client should use another property function() { if(xmlHttp.readyState==4) { var postedback=xmlHttp.responseXML; //usually responseXML.documentElement }