Fawaz Ghali AJAX: Web Programming's Toy

2 Overview Why AJAX Getting started AJAX Frameworks Demo

3 AJAX Asynchronous JavaScript and XML JavaScript communicates with the server (XMLHttpRequest) Asynchronous data transfer Web applications are smaller, faster and more user-friendly. Usually, you still need server programming language (i.e., PHP)

4 AJAX components 1.HTML/CSS: presenting information 2.Document Object Model (DOM): dynamic interaction with the information 3.XMLHttpRequest object: retrieving data from the server asynchronously 4.JavaScript: wrap AJAX code

5 AJAX use Forms validations Auto-complete / Auto-suggest Master-detail relations (more information to display) User-friendly screens Web 2.0 applications

6 How does AJAX work? Source:

7 AJAX basic example function ajaxUpdater(id,url) { new Ajax.Updater(id,url,{asynchronous:true}); } prototype.js is AJAX library :

8 AJAX basic example cont HTML code:

9 AJAX basic example Cont hello.php: <?php echo "Hello world!"; // you can define any function ?>

10 AJAX Frameworks AJAX frameworks simplify the code and speed the development. Depend on server programming language Component (widgets) use vs. direct use Mashups with Google, Yahoo!, Flickr etc…

11 How to choose framework? Server independent or not? Structural JavaScript? Re-usability of your AJAX code? Documentation (examples, support) Learning curve

12 Google Web Toolkit (GWT) Faster AJAX than you can write by hand Smaller, more compact, cacheable code Support IE, Firefox, Mozilla, Safari Browser's "back" button correctly use Full-featured debugging Unit tests (based on JUnit)

13 GWT Hello

14 GWT public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello, AJAX"); } }); RootPanel.get().add(b); }

15 GWT Demo:

16 AJAX Examples & Tutorials es/ajax/tutorial.jsphttp://java.sun.com/javaee/javaserverfac es/ajax/tutorial.jsp

17 AJAX best practices Tell the user that the websites uses AJAX (i.e., dynamic update) Provide non-AJAX options Provide alerts for dynamic changes Make navigation easy Update HTML elements with new content rather creating new elements