Vous êtes sur la page 1sur 28

Ajax Basics

The XMLHttpRequest Object


Ajax is…. Ajax is not….

• Ajax is not a programming language.


• Ajax is a methodology
• Ajax works with the XMLHttpRequest
Object. (JavaScript)
– ActiveX with IE5 to IE6
– Native Object for other browsers and IE7
• And your choice of ServerSide
Technology
Ajax does not rely on just the
XMLHttpRequest Object

• Iframes and JSON can also be used


instead of the XHR object.

• We will look into these methods later


on.
Asynchronous JavaScript and
XML

• Utilizes the XMLHttpRequest() Object.


– First implemented in Microsoft Internet
Explorer Version 5 for Windows as an
ActiveX Object
– The other browsers copied Microsoft
starting with these versions:
• Mozilla 1.0 / Firefox 1.0 / Netscape 7
• Opera 8.01 / Opera Mobile Browser 8.0
• Safari 1.2 / Konqueror 3.2 / iCab 3.0b352
• Plus other minor browsers
What started the hype?
Adaptive Path’s Original
Diagram
The Real Life Diagram – How to
explain it to your non-geek
friends

THE COLLEGE PARTY


The Bleak Situation
The Non-Ajax Solution
• Figure out what is more important
and rank order of operation.
• Should I clean the mess, get food, or
update the outdated music
collection?
• Perform one task and do the others
after each other. Hopefully I have
enough time!
– Go to Store, Download Music, Clean
Apartment so it can be trashed again.
The Ajax Solution
• Do multiple things at
once!

• Hire a maid to do the


cleaning!
• Order delivery pizza!
• And I can download
new music while
others do the dirty
work! Ajax Clean!
Benefits and Problems
• The Page Weight
• Rendering Pages
• Maintain Page
State
• Back, Forward,
and Refresh
• Connection
Speed
• JavaScript!
XMLHttpRequest Limitations
• No Cross Domain
Requests
• JavaScript
Disabled
• Older Browsers
• Older Servers
• 508?
CROSS BROWSER
JAVASCRIPT
The XHR Object
• The Gecko / Safari / IE7 Object
Constructor
– req = new XMLHttpRequest();

• The ActiveX for IE 6 and earlier


– req = new
ActiveXObject("Microsoft.XMLHTTP");
OR
– req = new
ActiveXObject("Msxml2.XMLHTTP");
XHR Object Methods
Method Description
abort() Stops the current request

getAllResponseHeaders() Returns all header (labels/value)


sets

getResponseHeader("headerLabel Returns value of a specified


") header label

open("method", "URL"[, The heart and soul! Sets


asyncFlag[, "userName"[, destination URL, method, and
"password"]]]) other optional attributes
send(content) Transmits the request

setRequestHeader("label", Assigns header to be sent with a


"value") request
XHR open()

• open("method", "URL",
asyncFlag); method = GET or
POST

URL = Page to request


asyncFlag = True or False
XHR Object Properties
Property Description
onreadystatechange Event handler for an event that fires
at every state change

readyState Object status integer

responseText String version of data returned from


server process

responseXML DOM-compatible document object of


data returned from server process

status Numeric code returned by server,


such as 404 for "Not Found" or 200 for
"OK"
statusText String message accompanying the
status code
readyState values

• 0 – uninitialized
• 1 – loading
• 2 – loaded
• 3 – interactive
• 4 – complete (Can process returned
data!)
BASIC DEMO TIME
JavaScript Quiz

• Quiz.....
Basic Ajax In Action Content
Loader

var loader1 = new net.ContentLoader(


"RequestURL.aspx",
FinishFunction,
customErrorFunction,
"POST/GET",
"POST Parameters");
Security

• No different than a
traditional
postback
• Check for SQL
Injection
• Check for
JavaScript Injection
• Validate the Data
Hack This Form

• Basic Form Hack Example


Business Logic - Server or
Client
• Really depends on application
• Security
• Visual Rendering
• Speed - Process data how many
times?
• Data size in response/request
• XML, Strings, or JSON?
Ajax Developer Must Haves!

• Drip IE Leak Detector


• Firefox Extensions
• Adblock – Ah, just because!
• Firebug
• Selenium IDE
• JSView
• NOSCRIPT
• Modify Headers
Where to get more info

• Forum: http://www.javaranch.com
• Forum: http://www.intelliobjects.com/
• Ajax News: http://www.Ajaxian.com
• Ajax In Action info:
http://www.manning.com/crane
Larger Demos
&
Questions