1. 1 Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COT 6930 Advanced Internet Programming Dr. Roy Levow Day 1

2. Advanced Internet Programming – Fall 2006 2 Day 1 Syllabus Course Introduction Introduction to AJAX Review of base technologies HTML & CSS JavaScript Document Object Model (DOM) AJAX Basics AJAX Patterns (introduction)

3. Advanced Internet Programming – Fall 2006 3 Course Goals Reinforce concepts from Web Programming HTML, CSS, JavaScript, DOM Develop understanding of AJAX programming model Asynchronous JavaScript + XML XPath, XSLT, JSON Provide skills for Ajax web project

4. Advanced Internet Programming – Fall 2006 4 oJesse James Garrett of Adaptive Path Conceives alternative to Macromedia Flash using free technologies (February 2006) Asynchronous HTTP Request JavaScript And XML Publishes ideas online Ajax: A New Approach to Web Applications See also article form June 2006 Wiredarticle Intro to Ajax film clipfilm clip Ajax is Born Web Development Project – Fall 2006

5. Advanced Internet Programming – Fall 2006 5 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

6. Advanced Internet Programming – Fall 2006 6 Ajax Site Examples Google Suggest (Beta) http://www.google.com/webhp?complete=1&hl=en http://www.google.com/webhp?complete=1&hl=en Google Maps http://maps.google.com/ http://maps.google.com/ Gmail http://gmail.google.com/ http://gmail.google.com/ Google Page Creator (Beta) http://pages.google.com/ http://pages.google.com/

7. Advanced Internet Programming – Fall 2006 7 AJAX vs Classic Page Loads

8. Advanced Internet Programming – Fall 2006 8

9. 9

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

11. Advanced Internet Programming – Fall 2006 11 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

12. Advanced Internet Programming – Fall 2006 12 Alternative Technologies Macromedia Flash Highly interactive Prepackaged “movies” Requires plugin Java Web Start Java application interacts between client and server Microsoft.NET

13. Advanced Internet Programming – Fall 2006 13 Ajax Component Technologies XHTML CSS JavaScript Document Object Model (DOM) XML, XPath, XSLT XMLHttpRequest Server-side technologies

14. Advanced Internet Programming – Fall 2006 14 Ajax Design Principles Highly interactive Smooth responses Separation of Data Presentation Program logic

15. Advanced Internet Programming – Fall 2006 15 Fundamental Technologies XHTML Provides basis for presentation of web pages Cascading Style Sheets (CSS) Provide for separation of format from content Document Object Model (DOM) Dynamic access to elements of web page in browser Extensible Markup Language (XML) Basic structure for representation of data and other structured documents

16. Advanced Internet Programming – Fall 2006 16 DOM Review DOM creates tree representation of web page Tree can be mainpulated with JavaScript Changes in tree structure or values change rendered page

17. Advanced Internet Programming – Fall 2006 17 DOM Example Shop Buy it Don’t forget Beans Milk html head metatitle body h1pul li

18. Advanced Internet Programming – Fall 2006 18 DOM Tree Components Nodes Element nodes Correspond to tags Text nodes Contain text of elements Attribute nodes Contain attributes attr=“value”

19. Advanced Internet Programming – Fall 2006 19 Major DOM Methods getElementById Returns element with specified id or null doucment.getElementById(“item1”) getElemensByTagName Returns array of elements with the specified tag name document.getElementsByTagName(“li”)

20. Advanced Internet Programming – Fall 2006 20 Major DOM Methods getAttribute Gets specified attribute or null from an object obj.getAttribute(“style”) setAttribute Sets value of specified attribute for an object obj.setAttribute(“title”, “help me”)

21. Advanced Internet Programming – Fall 2006 21 Introduced in HTML 4.0 Allow page to be loaded into portion of browser window Use discouraged in XHTML because of poor interaction with back button Hidden frame technique Use 1-pixel frame to contain form (thus hidden) Fill in form from JavaScript and submit Receive response asynchronously to update page Iframes Independent of frameset Go anywhere on page and can be hidden Frames (Prelude to AJAX) Web Development Project – Fall 2006

22. Advanced Internet Programming – Fall 2006 22 On Browser Ajax Engine (JavaScript code) Generates display using HTML and CSS Receive JS calls from user interface Sends HTTPRequest to Server Receives Data from Server Server Receives HTTPRequest from Browser Interacts with local database Sends Data to Browser The Real Ajax Web Development Project – Fall 2006

23. Advanced Internet Programming – Fall 2006 23 Hypertext Transfer Protocol Accepts requests from browser Transfers responses to browser Fetch web pages but has many other uses HTTPRequest format [ ] HTTP Web Development Project – Fall 2006

24. Advanced Internet Programming – Fall 2006 24 Many request types GET and POST are of interest in Ajax Example GET GET / HTTP/1.1 Host: www.wrox.comwww.wrox.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive Get request for root node with HTTP version Originating client and information on client Request to maintain connection for more transfers HTTP Request

25. Advanced Internet Programming – Fall 2006 25 Item following GET is path to page to load GET /index.html HTTP/1.1 Parameters can be appended to the url as in URL ? name1=value1&name2=value2&… HTTP Request Web Development Project – Fall 2006

26. Advanced Internet Programming – Fall 2006 26 POST Example POST / HTTP/1.1 Host: www.wrox.comwww.wrox.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Content-Type: application/x-www-form-urlencoded Content-Length: 40 Connection: Keep-Alive name=Professional%20Ajax&publisher=Wiley Adds Content-Type, Content-Length, and data POST Web Development Project – Fall 2006

27. Advanced Internet Programming – Fall 2006 27 Response format ] Example HTTP/1.1 200 OK Date: Sat, 31 Dec 2005 23:59:59 GMT Content-Type: text/html; charset=ISO8859-1 Content-Length: 122 HTTP Responses Web Development Project – Fall 2006

28. Advanced Internet Programming – Fall 2006 28 200 (OK) 304 (NOT MODIFIED) 401 (UNAUTHORIZED) 403 (FORBIDDEN) 404 (NOT FOUND) Response Codes Web Development Project – Fall 2006

29. Advanced Internet Programming – Fall 2006 29 Pattern Visible frame for user interaction User action triggers call to load hidden frame Server responds, loading hidden frame JavaScript transfers data from hidden frame to visible frame Examples: Hidden Frame ExamplesHidden Frame Examples Hidden Frame Technique Web Development Project – Fall 2006

30. Advanced Internet Programming – Fall 2006 30 Hidden iFrame approach is similar but cleaner No frameset required iFrame can be created dynamically Examples: Hidden iFrame ExamplesHidden iFrame Examples Note: Back/Forward behavior depends on browser Okay in IE Works in Foxfire only if frame is in orignian html Not in Safari Hidden iFrames Web Development Project – Fall 2006

31. Advanced Internet Programming – Fall 2006 31 XMLHttp Request The Real Thing No frames required Unfortunately, implement differs among browsers Use browser identifying code to put generic wrapper on request code Examples: XMLHttp Requests ExamplesXMLHttp Requests Examples

32. Advanced Internet Programming – Fall 2006 32 XMLHttp Request Processing Create XMLHttpRequest Object Sense browser to use required mechanism Open connection to web server Specify get/post, url, asynchronous Set handler for readystate change 0 = Uninitialized 1 = Loading 2 = Loaded 3 = Interactive (partial response) 4 = Complete

33. Advanced Internet Programming – Fall 2006 33 XMLHttp Request Processing (cont.) Check status (response code) 200 is OK Verify the content type GET request example POST request example

34. Advanced Internet Programming – Fall 2006 34 XMLHttp Request Issues No Back/Forward Requires ActiveX in IE Load must be from the same server that delivered the page Can be handled by server program to act as proxy

35. Advanced Internet Programming – Fall 2006 35 AJAX Patterns Communication Control Predictive Fetch Preload anticipated next item Example: Predictive FetchPredictive Fetch Example: Multi-stage DownlaodMulti-stage Downlaod Submission Throttling Send data to server progressively Incremental form validation is an example Example: Submission ThrottlingSubmission Throttling

36. Advanced Internet Programming – Fall 2006 36 AJAX Patterns (cont.) Periodic Refresh Keep view up-to-date with changing data ESPN scoreboard Gmail Example: Periodic RefreshPeriodic Refresh Fallback Patterns Cancel Pending Try Again