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

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

Advanced Internet Programming – Fall 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 Ajax Site Examples Google Suggest (Beta) Google Maps Gmail Google Page Creator (Beta)

Advanced Internet Programming – Fall AJAX vs Classic Page Loads

Advanced Internet Programming – Fall

9

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

Advanced Internet Programming – Fall 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 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 Ajax Component Technologies XHTML CSS JavaScript Document Object Model (DOM) XML, XPath, XSLT XMLHttpRequest Server-side technologies

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

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

Advanced Internet Programming – Fall 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 DOM Example Shop Buy it Don’t forget Beans Milk html head metatitle body h1pul li

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

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

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

Advanced Internet Programming – Fall Many request types GET and POST are of interest in Ajax Example GET GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/ 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

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

Advanced Internet Programming – Fall POST Example POST / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/ 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

Advanced Internet Programming – Fall Response format ] Example HTTP/ OK Date: Sat, 31 Dec :59:59 GMT Content-Type: text/html; charset=ISO Content-Length: 122 HTTP Responses Web Development Project – Fall 2006

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

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

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

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

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

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

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