Fall%202006

1
Florida Atlantic UniversityDepartment of
Computer Science Engineering
COT 6930Advanced Internet Programming Dr. Roy
Levow Day 1
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
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
Ajax is Born

• Jesse James Garrett of Adaptive PathConceives
  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 Wired
• Intro to Ajax film clip

Web Development Project 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
Ajax Site Examples

• Google Suggest (Beta)http//www.google.com/webhp?
  complete1hlen
• Google Mapshttp//maps.google.com/
• Gmailhttp//gmail.google.com/
• Google Page Creator (Beta) http//pages.google.co
  m/

7
AJAX vs Classic Page Loads
8
(No Transcript)
9
(No Transcript)
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
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
Alternative Technologies

• Macromedia Flash
• Highly interactive
• Prepackaged movies
• Requires plugin
• Java Web Start
• Java application interacts between client and
  server
• Microsoft .NET

13
Ajax Component Technologies

• XHTML
• CSS
• JavaScript
• Document Object Model (DOM)
• XML, XPath, XSLT
• XMLHttpRequest
• Server-side technologies

14
Ajax Design Principles

• Highly interactive
• Smooth responses
• Separation of
• Data
• Presentation
• Program logic

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
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
DOM Example

• lt!DOCTYPE gt
• lthtml xmlns gt
• ltheadgt
• ltmeta http-equiv gt
• lttitlegtShoplt/titlegt
• lt/headgt
• ltbodygt
• lth1gtBuy itlt/h1gt
• ltpgtDont forgetlt/pgt
• ltul iditemsgt
• ltligtBeanslt/ligt
• ltligtMilklt/ligt
• lt/ulgt
• lt/bodygt
• lt/htmlgt

18
DOM Tree Components

• Nodes
• Element nodes
• Correspond to tags
• Text nodes
• Contain text of elements
• Attribute nodes
• Contain attributes
• attrvalue

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

Web Development Project Fall 2006
22
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

Web Development Project Fall 2006
23
HTTP

• Hypertext Transfer Protocol
• Accepts requests from browser
• Transfers responses to browser
• Fetch web pages
• but has many other uses
• HTTPRequest format
• ltrequest-linegt
• ltheadersgt
• ltblank linegt
• ltrequest bodygt

Web Development Project Fall 2006
24
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
• rv1.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

25
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 ? name1value1name2value2

Web Development Project Fall 2006
26
POST

• POST Example
• POST / HTTP/1.1
• Host www.wrox.com
• User-Agent Mozilla/5.0 (Windows U Windows NT
  5.1 en-US
• rv1.7.6) Gecko/20050225 Firefox/1.0.1
• Content-Type application/x-www-form-urlencoded
• Content-Length 40
• Connection Keep-Alive
• nameProfessional20AjaxpublisherWiley
• Adds Content-Type, Content-Length, and data

Web Development Project Fall 2006
27
HTTP Responses

• Response format
• ltstatus-linegt
• ltheadersgt
• ltblank linegt
• ltltresponse-bodygt
• Example
• HTTP/1.1 200 OK
• Date Sat, 31 Dec 2005 235959 GMT
• Content-Type text/html charsetISO8859-1
• Content-Length 122

Web Development Project Fall 2006
28
Response Codes

• 200 (OK)
• 304 (NOT MODIFIED)
• 401 (UNAUTHORIZED)
• 403 (FORBIDDEN)
• 404 (NOT FOUND)

Web Development Project Fall 2006
29
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

Web Development Project Fall 2006
30
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

Web Development Project 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 Examples

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
XMLHttp Request Processing (cont.)

• Check status (response code)
• 200 is OK
• Verify the content type
• GET request example
• POST request example

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

36
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