AJAX: Web Programming's Toy Fawaz Ghali F. Ghali@Warwick. ac. uk 1
Overview • Why AJAX • Getting started • AJAX Frameworks • Demo 2
AJAX • Asynchronous Java. Script and XML • Java. Script communicates with the server (XMLHttp. Request) • Asynchronous data transfer • Web applications are smaller, faster and more user-friendly. • Usually, you still need server programming language (i. e. , PHP) 3
AJAX components 1. HTML/CSS: presenting information 2. Document Object Model (DOM): dynamic interaction with the information 3. XMLHttp. Request object: retrieving data from the server asynchronously 4. Java. Script: wrap AJAX code 4
AJAX use • Forms validations • Auto-complete / Auto-suggest • Master-detail relations (more information to display) • User-friendly screens • Web 2. 0 applications 5
How does AJAX work? 6 Source: http: //java. sun. com/javaee/javaserverfaces/ajax/tutorial. jsp
AJAX basic example <html> <head> <script src="prototype. js" type="text/javascript"></script > <script type="text/javascript"> function ajax. Updater(id, url) { new Ajax. Updater(id, url, {asynchronous: true}); } </script> </head> prototype. js is AJAX library : http: //www. prototypejs. org/ 7
AJAX basic example cont HTML code: <body> <div id="updateme"></div> <input type="button" value="Update" on. Cl ick="ajax. Updater('updateme', ‘hello. php') "> </body> </html> 8
AJAX basic example Cont hello. php: <? php echo "Hello world!"; // you can define any function ? > http: //prolearn. dcs. warwick. ac. uk/AH-RO-2008/ajax_demos/ajax_1. html 9
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… 10
How to choose framework? • • • Server independent or not? Structural Java. Script? Re-usability of your AJAX code? Documentation (examples, support) Learning curve 11
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) 12
GWT <html> <head> <title>Hello</title> </head> <body> <script language="javascript" src="com. google. gwt. sample. hello. Hello. noca che. js"></script> </body> </html> 13
GWT public class Hello implements Entry. Point { public void on. Module. Load() { Button b = new Button("Click me", new Click. Listener() { public void on. Click(Widget sender) { Window. alert("Hello, AJAX"); } }); Root. Panel. get(). add(b); } } 14
GWT • Demo: http: //gwt. google. com/samples/Hello. html 15
AJAX Examples & Tutorials • • http: //www. w 3 schools. com/Ajax/ http: //www. ajaxtutorial. net/ http: //www. tizag. com/ajax. Tutorial/ http: //java. sun. com/javaee/javaserverfa ces/ajax/tutorial. jsp 16
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 17
Скачать презентацию AJAX Web Programming s Toy Fawaz Ghali F Ghali Warwick
d6a7ce9e0375e4c39a7f27fdf4a6b8c4.ppt