1 Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COT 6930...

1Fall 2006

Florida Atlantic UniversityDepartment of Computer Science & Engineering

COT 6930Advanced Internet Programming

Dr. Roy Levow

Day 1

Advanced Internet Programming – Fall 2006 2

Day 1 Syllabus Course Introduction Introduction to AJAX Review of base technologies

HTML & CSSJavaScriptDocument Object Model (DOM)

AJAX Basics AJAX Patterns (introduction)


Course Goals Reinforce concepts from Web Programming

HTML, CSS, JavaScript, DOM Develop understanding of AJAX

programming modelAsynchronous JavaScript + XMLXPath, XSLT, JSON

Provide skills for Ajax web project


o 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

Ajax is Born

Web Development Project – Fall 2006


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


Ajax Site Examples Google Suggest (Beta)

http://www.google.com/webhp?complete=1&hl=en

Google Mapshttp://maps.google.com/

Gmailhttp://gmail.google.com/

Google Page Creator (Beta) http://pages.google.com/


AJAX vs Classic Page Loads


Pros and Cons of Ajax: Pros Interactivity

Achieved by direct manipulation of DOMQuick updates using incremental data loads

PortabilityOpen standardsJavaScript is supported by most current

browsers


Pros and Cons of Ajax: Cons Inefficiency

Interpreted codeOverhead of XML transfer (larger files)

PortabilityRequires JavaScriptAlso requires ActiveX on IEInconsistent rendering

Issues with response to Back button Accessibility issues


Alternative Technologies Macromedia Flash

Highly interactivePrepackaged “movies”Requires plugin

Java Web StartJava application interacts between client and

server Microsoft .NET


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


Ajax Design Principles Highly interactive Smooth responses

Separation ofDataPresentationProgram logic


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


DOM Review DOM creates tree representation of web

page Tree can be mainpulated with JavaScript Changes in tree structure or values change

rendered page


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 body

meta title h1 p ul

li li


DOM Tree Components Nodes

Element nodes• Correspond to tags

Text nodes• Contain text of elements

Attribute nodes• Contain attributes• attr=“value”


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


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


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



• 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



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

HTTP



• 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

HTTP Request


Item following GET is path to page to loadGET /index.html HTTP/1.1

Parameters can be appended to the url as inURL ? name1=value1&name2=value2&…

HTTP Request



POST ExamplePOST / 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

POST



• 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

HTTP Responses



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

Response Codes



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

Hidden Frame Technique



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

Hidden iFrames



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


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


XMLHttp Request Processing (cont.) Check status (response code)

200 is OK Verify the content type GET request example POST request example


XMLHttp Request Issues No Back/Forward Requires ActiveX in IE Load must be from the same server that

delivered the pageCan be handled by server program to act as

proxy


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


AJAX Patterns (cont.) Periodic Refresh

Keep view up-to-date with changing data• ESPN scoreboard• Gmail

Example: Periodic Refresh Fallback Patterns

Cancel PendingTry Again

1 Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COT 6930...

Documents

Transcript of 1 Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COT 6930...