1 / 17

Mastering AJAX: A Comprehensive Guide to Asynchronous Web Development

This overview of AJAX (Asynchronous JavaScript and XML) delves into why this technology is essential for modern web applications. Learn how AJAX enhances user experience by allowing smaller, faster, and more interactive applications. We cover key components including XMLHttpRequest, various AJAX frameworks like Google Web Toolkit, and best practices for implementing AJAX in your projects. Whether you’re validating forms, implementing auto-complete features, or optimizing server communication, this guide provides foundational knowledge and practical examples to harness the power of AJAX effectively.

marlie
Télécharger la présentation

Mastering AJAX: A Comprehensive Guide to Asynchronous Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX: Web Programming's Toy Fawaz Ghali F.Ghali@Warwick.ac.uk

  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 • HTML/CSS: presenting information • Document Object Model (DOM): dynamic interaction with the information • XMLHttpRequest object: retrieving data from the server asynchronously • 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: http://java.sun.com/javaee/javaserverfaces/ajax/tutorial.jsp

  7. AJAX basic example <html>   <head>   <script src="prototype.js" type="text/javascript"></script>   <script type="text/javascript">   function ajaxUpdater(id,url) {    new Ajax.Updater(id,url,{asynchronous:true});   }   </script>   </head>   prototype.js is AJAX library : http://www.prototypejs.org/

  8. AJAX basic example cont HTML code: <body>   <div id="updateme"></div>   <input type="button" value="Update" onClick="ajaxUpdater('updateme',‘hello.php')">   </body>   </html>  

  9. 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

  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 <html> <head> <title>Hello</title> </head> <body> <script language="javascript" src="com.google.gwt.sample.hello.Hello.nocache.js"></script> </body> </html>

  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: http://gwt.google.com/samples/Hello/Hello.html

  16. AJAX Examples & Tutorials • http://www.w3schools.com/Ajax/ • http://www.ajaxtutorial.net/ • http://www.tizag.com/ajaxTutorial/ • http://java.sun.com/javaee/javaserverfaces/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

More Related