1. 1 AJAX

2. AJAX – Whatzit? Asynchronous (content loading)‏ Javascript (logic & control)‏ And XML (request handling)‏

3. AJAX - Really? Set of cross-platform conventions and techniques to load data browser-side, without interfering with the display and behaviour of the existing page Relies on Javascript & the DOM, assumes XHTML & CSS used XMLHttpRequest object in browser

4. AJAX – Whyzit? Reload content pieces parts of an HTML page) without complete page reload

5. HTTP Transport with Ajax

6. Request Processing

7. XmlHttpRequest Browser object to retrieve content from server page was dished from Need a new such object for each request Uses a callback mechanism when the HTTP request state changes

8. XmlHttpRequest Methods abort()‏ Aborts current request getAllResponseHeaders()‏ Returns set of HTTP headers as string getResponseHeader( headerName )‏ Return specified HTTP header value open( method, URL, [async, [userName, [password]]] )‏ Specifies the method, URL & other request attributes send( content )‏ Send the request setRequestHeader( label, value )‏ Set an HTTP request header

9. XmlHttpRequest Properties onreadystatechange -> callback function readystate 0..4 (uninitialized, open, send, receiving, done)‏ responseText = response as string responseXml = response as XML fragment responseBody = response as binary-encoded string status = HTTP response code statusText = status as string

10. Browser Handling if (window.XMLHttpRequest) // Existing class { xhr = new XMLHttpRequest(); // Firefox, Safari,... } else if (window.ActiveXObject) // ActiveX version { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // I.E. } xhr.onreadystatechange = function() { // instructions to process the response }; xhr.open('GET', 'http://www.xul.fr/somefile.xml', true); xhr.send(null); // for POST only

11. Reponse Handling xhr.onreadystatechange = function()‏ { if(xhr.readyState == 4)‏ { if(xhr.status == 200) document.ajax.dyn="Received:" + xhr.responseText; else document.ajax.dyn="Error code " + xhr.status; } }; document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;

12. Ajax Advantages Bandwidth friendly Better separation of data & presentation Considered a “Rich Internet Application” (RIA)‏ a.k.a. Part of Web 2.0 0 0 0

13. Ajax Issues Browser integration Back-button Bookmark ease Javascript enabled Reponse time concerns Reliance on Javascript & DOM Web analytics

14. Ajax Libraries Dojo Mochikit (Google)‏ Mochikit Prototype YUI ExtJS jQuery

15. AJAX with CodeIgniter Tutorial … littlebrain.org/2008/05/27/codeigniter-and- ajax-using-jquery-tutorial/ Another … www.mrforbes.com/blog/2009/01/a-quick- code-igniter-and-jquery-ajax-tutorial/ www.mrforbes.com/blog/2009/01/a-quick- code-igniter-and-jquery-ajax-tutorial/ Another … www.ibm.com/developerworks/web/library/wa -aj-codeigniter/ Library … codeigniter.com/wiki/AJAX_for_CodeIgniter/ More … choosedaily.com/1052/9-ways-to- integrate-ajax-with-codeigniter/

16. Dojo AJAX Example function hello() { // ➁ dojo.xhrGet( { // ➂ // The following URL must match that used to test the server. url: "http://server/controller/method", handleAs: "text", // choose this wisely timeout: 5000, // Time in milliseconds // The LOAD function will be called on a successful response. load: function(response, ioArgs) { // ➃ dojo.byId("cargo").innerHTML = response; // ➄ return response; // ➅ }, // The ERROR function will be called in an error case. error: function(response, ioArgs) { // ➃ console.error("HTTP status code: ", ioArgs.xhr.status); // ➆ return response; // ➅ } }); }

17. DOJO AJAX in Practice var kw = { url: "myprogram.php", load: function(data){ dojo.byId('myBox').value = data; }, error: function(data){ console.debug("An error occurred: ", data); }, timeout: 2000, form: "myForm" }; dojo.xhrGet(kw);

18. JSON vs XML {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} { name : value, … }

19. JSON for Data Exchange Built-into PHP... $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; $obj = json_decode($json); $obj->a … $d = array('foo' => 'bar', 'baz' => 'long'); echo json_encode($d); … {"foo":"bar","baz":"long"} p.s. - Also Built into PHP... $obj = (object)array( "assoc" => array("cow"=>"moo"), "object" => (object)array("cat"=>"miao"), ); $obj = false; foreach ($array as $akey => $aval) { $obj -> {$akey} = $aval; } $array = get_object_vars($obj);