Understanding AJAX: A Comprehensive Guide to Asynchronous Web Applications

Introduction to AJAX Speaker: Yan-Shiang Wang Date:2006.11.20

Outline • Introduction • Examples • Explanation • Coding yourself • Demo • Reference

AJAX • Asynchronous JavaScript and XML • It was born on February 2005 • It isn't a technology; it's an approach. • Combine Web Browser and Application Server • Creating interactive web applications • Refresh without reload

Examples (1/2) • Map query • http://www.map.com.tw/ • Autocomplete • http://tw.dictionary.yahoo.com/ • Web Office • http://www.thumbstacks.com/ • Web OS • http://osx.portraitofakite.com/

Examples (2/2) • Drag and Drop • http://cyberdummy.co.uk/test/dd.php • http://tool-man.org/examples/ • Active Table • http://wiki.donttouchme.org/index.php/AJAX_ActiveTable • Slider Bar • http://www.cyberdummy.co.uk/test/slider/

Definition • standards-based presentation using XHTML and CSS • dynamic display and interaction using the Document Object Model • data interchange and manipulation using XML and XSLT • asynchronous data retrieval using XMLHttpRequest • JavaScript binding everything together

Explanation • asynchronous because independent of communication with the server • JavaScript function creates an object that communicates with the Web browser and tells the browser to load a specific page • XMLHttpRequest object is used to retrieve page content in JavaScript

Figure 1 traditional model vs Ajax model

Figure 2 synchronous vs asynchronous

Conclusion • Pros • Bandwidth utilization • Interactivity • Cons • Usability: back button and bookmarks • Response-time concerns • Search Engine Optimization

SAJAX • Simple Ajax Toolkit • open source tool to make programming websites as easy as possible • http://www.modernmethod.com/sajax/

Tutorial(1/4) • Include the library and initialize it and tell it what functions you wish to export: <?php require("Sajax.php"); // the function we will be exporting to JavaScript: function multiply($x, $y) { return $x * $y;} sajax_init(); sajax_export("multiply"); // list of functions to export sajax_handle_client_request(); // serve client instances ?>

Tutorial(2/4) • Setup your HTML(including the JavaScript the library generates) <html> <head> <title>Test</title> <script> <? sajax_show_javascript(); ?> function set_math_result(result){ document.getElementById("z").value = result; }

Tutorial(3/4) function do_the_math() { var x, y; x = document.getElementById("x").value; y = document.getElementById("y").value; // our php function multiply() has been linked to a javascript function named // x_multiply(). call it. x_multiply(x, y, set_math_result); } </script>

Tutorial(4/4) <body> <input type="text" name="x" id="x" value="2" size="3"> * <input type="text" name="y" id="y" value="3" size="3"> = <input type="text" name="z" id="z" value="" size="3"> <input type="button" name="check" value="Calculate" onclick="do_the_math(); return false;"> </body> </html> http://ms11.voip.edu.tw/~sepp/sajax/example_multiply.php http://ms11.voip.edu.tw/~sepp/sajax/simple_multiply.php

Dynamic grapher • Demo • http://ms11.voip.edu.tw/rrdtool/ • Source code • http://ms11.voip.edu.tw/~sepp/rrdtest/slider/rrdtool.phps

Reference • Ajax: A New Approach to Web Applications • http://www.adaptivepath.com/publications/essays/archives/000385.php • Wikipedia Ajax (programming) • http://en.wikipedia.org/wiki/AJAX • Using Ajax with PHP and Sajax • http://www-128.ibm.com/developerworks/edu/os-dw-os-phpajax-i.html?S_TACT=105AGX59&S_CMP=GR&ca=dgr-lnxw07SAJAX • Ajax framework • http://scw1109.wordpress.com/tag/technologies/ajax/

Reference (cont.) • Ajax新浪潮 • http://jacky.seezone.net/2005/02/25/1127/ • Ajax入門 • http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml • Web介面設計新趨勢 • http://blog.yam.com/syshen/archives/184517.html • Ajax探討 • http://phorum.study-area.org/viewtopic.php?p=194397#194397

Understanding AJAX: A Comprehensive Guide to Asynchronous Web Applications