Aprendiendo Ajax

AJAX & Rich Internet Applications
Bringing Interactivity & Intuitiveness Into Web Applications

AJAX Defined
• Asynchronous Javascript and XML
– Term coined by Jesse James Garrett
– www.adaptivepath.com

• Ajax is not a new technology

– Google calls their technique: Javascript
– Also known as XMLHTTP technique
– In use since at least 1997

Mr. Ajax

• A bundle of techniques
–
––
–
–

Some are pure – XML data interchange only
Some are not – Passing Javascript methods to client
Some are cool – DHTML widgets
Some are not – XML & XSLTs
Ok..they’re all cool…

• Core techniques are centered around asynchronous
communication to the server without a page refresh

1

Traditional Web Applications…

Action
Validation
Persistence
Forwarding

Pick An Item‘Add To Cart’

Review Cart
Enter Data
Submit

Enter
Shipping

Action
Validation
Persistence
Forwarding

Enter Data
Submit

Pages & Actions
Action
Validation
Persistence
Forwarding

Error Page

‘Can’t Order 500’

Unit of work is a page

Enter Billing
Enter Data
Submit

Client code concerned with validation
Submits sent to actions
Actions perform work and then forwardto next page
Page refresh for each submit

AJAX Changes How Web Apps are Built
Components & Events
Item List
Component

Order Entry
Events/Actions

ErrorViewer
(DIV)

Shopping Cart (DIV)
Shipping Form (DIV)

Validation

AJAX

Item List (DIV)

Persistence
Event Handlers
GUI Creation

Shopping Cart
Component
Shipping
Component

Billing Form (DIV)

BillingComponent

Unit of work is a component
Three-Tier Client/Server Model
Client code has validation, flow, layout, data interchange
No submit buttons—save buttons
Only parts of pages are updated at a time

2

AJAX Enabled Master Detail Form

No screen flicker.
Individual regions or fields updated.
Client sends data to server asynchronously.
Server returns data, messages, gui, or code.

Twoways of talking to the server…
•

XMLHTTPRequest object

•

IFRAME

–
–
–
–
–

Allows for asynchronous GETs + POSTs to the server
Does not show the user anything—no status messages
Can have multiple XMLHTTPRequest active at one time
Allows you to specify a handler method for state changes
Handler notified when request is:
• Initialized
• Started
• In the process of beingreturned
• Completely finished
– Originally only available for Microsoft IE
–
–
–
–
–
–
–

IFRAME is a “mini-browser” window in an HTML document
Can be hidden (0 width, 0 height)
IFRAME can call a URL
Javascript can read the contents of the IFRAME
User sees messages on status bar
Hears a click as server submits request
Much slower than XMLHTTPRequest

3

XMLHttpRequest Object:Methods
• open(“method”, “URL”)
• open(“method”, “URL”, async, username, password)
– Assigns destination URL, method, etc.

• send(content)
– Sends request including postable string or DOM object data

• abort()

– Terminates current request

• getAllResponseHeaders()
– Returns headers (labels + values) as a string

• getResponseHeader(“header”)
– Returns value of a given header

•setRequestHeader(“label”,”value”)
– Sets Request Headers before sending

XMLHttpRequest Properties
• onreadystatechange

– Event handler that fires at each state change
– You implement your own function that handles this

• readyState – current status of request
–
–
–
–

0 = uninitialized
1 = loading
2 = loaded
3 = interactive (some data has been returned)
• This is broken inIE right now
– 4 = complete

• status

– HTTP Status returned from server: 200 = OK

• responseText

– String version of data returned from server

• responseXML

– XML DOM document of data returned

• statusText

– Status text returned from server

4

Message Flow


XMLHttpRequest

Message
name=steve
Or
Steve

function handleResponse() {
…read response from...