1. Weekend MS CS Program Internet and Web Technologies COT 5930 Web Project Development - Ajax Dr. Roy Levow, Associate Chair & Professor Email: roy@cse.fau.edu Phone: 954-236-1170 Web: http://www.cse.fau.edu/~royhttp://www.cse.fau.edu/~roy

2. Lesson Plan 1. Introduction to Ajax 2. Constituent Technologies A. XHTML B. CSS C. JavaScript D. DOM E. XML, XLS, XSLT F. XMLHttpRequest 3. Simple Ajax Examples

3. Ajax Asynchronous JavaScript And XML Provides a framework for the development of web pages that are Interactive Highly dynamic Small transfers that update current page provide faster, smoother response

4. Ajax Site Example Google Suggest (Beta) http://www.google.com/webhp?complete=1&hl=en Google Maps http://maps.google.com/ Gmail http://gmail.google.com/ Google Page Creator (Beta) http://pages.google.com/

5. Ajax vs Classic Page Loads

6. Classic Synchronous Loads

7. Ajax Asynchronous Loads

8. Pros and Cons of Ajax: Pros Interactivity Achieved by direct manipulation of DOM Quick updates using incremental data loads Portability Open standards JavaScript is supported by most current browsers

9. Pros and Cons of Ajax: Cons Inefficiency Interpreted code Overhead of XML transfer (larger files) Portability Requires JavaScript Also requires ActiveX on IE Inconsistent rendering Issues with response to Back button Accessibility issues

10. Alternative Technologies Macromedia Flash Highly interactive Prepackaged “movies” Requires plugin Java Web Start Java application interacts between client and server Microsoft.NET

11. Ajax Component Technologies XHTML CSS JavaScript Document Object Model (DOM) XML and XSLT XMLHttpRequest

12. Ajax Design Principles Highly interactive Smooth responses Separation of Data Presentation Program logic

13. Ajax Tools A variety and growing number of tools have been developed to support Ajax technology Provide consistent development environment Hide XML and XMLHttpRequest complexity Ruby on Rails / Ajax on Rails Eclipse Ajax Tool Framework

14. Video Introduction Introduction to Ajax video from text what_is_ajax.mov

15. XHTML Provides basis for presentation of web pages Tutorial and Standard at W3Schools

16. Cascading Style Sheets (CSS) Provide for separation of format from content Tutorial and Standard at W3Schools

17. Domain Object Model (DOM) Dynamic access to elements of web page in browser Support for XHTML, XML, CSS Introduction to DOM W3 Schools XML DOM Tutorial W3 SchoolsXML DOM Tutorial Using DOM for DHTML Ryan's DHTML Tutorial, Part 4

18. XML Extensible Markup Language Provides basic structure for representation of data and other structured documents Tutorial and Standard at W3Schools Review of XML Namespaces

19. XSL Extensible Stylesheet Language More than just stylesheets For application to XML XSLT for transforming XML documents (into XHTLM) W3 Schools XSLT TutorialXSLT Tutorial XPath for selecting parts of an XML document W3 Schools XPath TutorialXPath Tutorial

20. References 1. Wikipedia – Ajax programming http://en.wikipedia.org/wiki/AJAX_%28programming%29 http://en.wikipedia.org/wiki/AJAX_%28programming%29 2. Ajax information and tutorials at Fiaminga dev http://dev.fiaminga.com/ 3. Ajax Blog http://ajaxblog.com/ 4. AjaxLessons.com http://www.ajaxlessons.com/ http://www.ajaxlessons.com/ 5. W3Schools tutorials and standards http://www.w3schools.org/ http://www.w3schools.org/