Advanced Internet Programming – Fall 2006
advertisement
Florida Atlantic University Department of Computer Science & Engineering COT 6930 Advanced Internet Programming Dr. Roy Levow Day 1 1 Fall 2006 Day 1 Syllabus Course Introduction Introduction to AJAX Review of base technologies HTML & CSS JavaScript Document Object Model (DOM) AJAX Basics AJAX Patterns (introduction) Advanced Internet Programming – Fall 2006 2 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 Advanced Internet Programming – Fall 2006 3 Ajax is Born o Jesse James Garrett of Adaptive Path Conceives alternative to Macromedia Flash using free technologies (February 2006) Publishes ideas online Asynchronous HTTP Request JavaScript And XML Ajax: A New Approach to Web Applications See also article form June 2006 Wired Intro to Ajax film clip Advanced Web Development Internet Programming Project – Fall – Fall 20062006 4 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 Advanced Internet Programming – Fall 2006 5 Ajax Site Examples 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/ Advanced Internet Programming – Fall 2006 6 AJAX vs Classic Page Loads Advanced Internet Programming – Fall 2006 7 Advanced Internet Programming – Fall 2006 8 Advanced Internet Programming – Fall 2006 9 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 Advanced Internet Programming – Fall 2006 10 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 Advanced Internet Programming – Fall 2006 11 Alternative Technologies Macromedia Flash Highly interactive Prepackaged “movies” Requires plugin Java Web Start Java application interacts between client and server Microsoft .NET Advanced Internet Programming – Fall 2006 12 Ajax Component Technologies XHTML CSS JavaScript Document Object Model (DOM) XML, XPath, XSLT XMLHttpRequest Server-side technologies Advanced Internet Programming – Fall 2006 13 Ajax Design Principles Highly interactive Smooth responses Separation of Data Presentation Program logic Advanced Internet Programming – Fall 2006 14 Fundamental Technologies XHTML Cascading Style Sheets (CSS) Provide for separation of format from content Document Object Model (DOM) Provides basis for presentation of web pages Dynamic access to elements of web page in browser Extensible Markup Language (XML) Basic structure for representation of data and other structured documents Advanced Internet Programming – Fall 2006 15 DOM Review DOM creates tree representation of web page Tree can be mainpulated with JavaScript Changes in tree structure or values change rendered page Advanced Internet Programming – Fall 2006 16 DOM Example <!DOCTYPE … > <html xmlns = … > <head> <meta http-equiv = … > <title>Shop</title> </head> <body> <h1>Buy it</h1> <p>Don’t forget</p> <ul id=“items”> <li>Beans</li> <li>Milk</li> </ul> </body> </html> html head meta title body h1 Advanced Internet Programming – Fall 2006 p ul li li 17 DOM Tree Components Nodes Element nodes • Correspond to tags Text nodes • Contain text of elements Attribute nodes • Contain attributes • attr=“value” Advanced Internet Programming – Fall 2006 18 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”) Advanced Internet Programming – Fall 2006 19 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”) Advanced Internet Programming – Fall 2006 20 Frames (Prelude to AJAX) • 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 Advanced Web Development Internet Programming Project – Fall – Fall 20062006 21 The Real Ajax • 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 Advanced Web Development Internet Programming Project – Fall – Fall 20062006 22 HTTP • Hypertext Transfer Protocol • Accepts requests from browser • Transfers responses to browser • Fetch web pages • but has many other uses • HTTPRequest format <request-line> <headers> <blank line> [<request body>] Advanced Web Development Internet Programming Project – Fall – Fall 20062006 23 HTTP Request • Many request types • GET and POST are of interest in Ajax • Example GET GET / HTTP/1.1 Host: www.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 Advanced Internet Programming – Fall 2006 24 HTTP Request 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&… Advanced Web Development Internet Programming Project – Fall – Fall 20062006 25 POST POST Example POST / HTTP/1.1 Host: www.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 Advanced Web Development Internet Programming Project – Fall – Fall 20062006 26 HTTP Responses • Response format <status-line> <headers> <blank line> <[<response-body>] • 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 Advanced Web Development Internet Programming Project – Fall – Fall 20062006 27 Response Codes • • • • • 200 (OK) 304 (NOT MODIFIED) 401 (UNAUTHORIZED) 403 (FORBIDDEN) 404 (NOT FOUND) Advanced Web Development Internet Programming Project – Fall – Fall 20062006 28 Hidden Frame Technique 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 Examples Advanced Web Development Internet Programming Project – Fall – Fall 20062006 29 Hidden iFrames Hidden iFrame approach is similar but cleaner No frameset required iFrame can be created dynamically Examples: Hidden 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 Advanced Web Development Internet Programming Project – Fall – Fall 20062006 30 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 Examples Advanced Internet Programming – Fall 2006 31 XMLHttp Request Processing Create XMLHttpRequest Object Open connection to web server Sense browser to use required mechanism Specify get/post, url, asynchronous Set handler for readystate change 0 = Uninitialized 1 = Loading 2 = Loaded 3 = Interactive (partial response) 4 = Complete Advanced Internet Programming – Fall 2006 32 XMLHttp Request Processing (cont.) Check status (response code) 200 is OK Verify the content type GET request example POST request example Advanced Internet Programming – Fall 2006 33 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 Advanced Internet Programming – Fall 2006 34 AJAX Patterns Communication Control Predictive Fetch • Preload anticipated next item • Example: Predictive Fetch • Example: Multi-stage Downlaod Submission Throttling • Send data to server progressively • Incremental form validation is an example • Example: Submission Throttling Advanced Internet Programming – Fall 2006 35 AJAX Patterns (cont.) Periodic Refresh Keep view up-to-date with changing data • ESPN scoreboard • Gmail Example: Periodic Refresh Fallback Patterns Cancel Pending Try Again Advanced Internet Programming – Fall 2006 36
