Slide 1

Download Report

Transcript Slide 1 

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"[, asyncFlag[,
"userName"[, "password"]]])
The heart and soul! Sets destination
URL, method, and other optional
attributes
send(content)
Transmits the request
setRequestHeader("label", "value")
Assigns header to be sent with a
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
•
•
•
•
•
My Blog: http://radio.javaranch.com/pascarello
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
• Presentation files for this talk will be located at:
http://www.pascarello.com/presentation/NOVA_Ajax/
Larger Demos
&
Questions