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
Download