Advanced Internet Programming – Fall 2006
Download
Report
Transcript Advanced Internet Programming – Fall 2006
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