View
306
Download
0
Category
Tags:
Preview:
Citation preview
Ajax Basics Ajax Basics The XMLHttpRequest ObjectThe XMLHttpRequest Object
Ajax is…. Ajax is not….Ajax is…. Ajax is not….
• Ajax is not a programming language.Ajax is not a programming language.
• Ajax is a methodologyAjax is a methodology
• Ajax works with the XMLHttpRequest Ajax works with the XMLHttpRequest Object. (JavaScript)Object. (JavaScript)– ActiveX with IE5 to IE6ActiveX with IE5 to IE6– Native Object for other browsers and IE7Native Object for other browsers and IE7
• And your choice of ServerSide And your choice of ServerSide TechnologyTechnology
Ajax does not rely on just the Ajax does not rely on just the XMLHttpRequest ObjectXMLHttpRequest Object
• Iframes and JSON can also be used Iframes and JSON can also be used instead of the XHR object. instead of the XHR object.
• We will look into these methods later We will look into these methods later on.on.
AAsynchronous synchronous JJavaScript avaScript aand nd XXMLML
• Utilizes the XMLHttpRequest() Object.Utilizes the XMLHttpRequest() Object.– First implemented in Microsoft Internet First implemented in Microsoft Internet
Explorer Version 5 for Windows as an Explorer Version 5 for Windows as an ActiveX ObjectActiveX Object
– The other browsers The other browsers copiedcopied Microsoft Microsoft starting with these versions:starting with these versions:• Mozilla 1.0 / Firefox 1.0 / Netscape 7Mozilla 1.0 / Firefox 1.0 / Netscape 7
• Opera 8.01 / Opera Mobile Browser 8.0Opera 8.01 / Opera Mobile Browser 8.0
• Safari 1.2 / Konqueror 3.2 / iCab 3.0b352Safari 1.2 / Konqueror 3.2 / iCab 3.0b352
• Plus other minor browsersPlus other minor browsers
What started the hype?What started the hype?
Adaptive Path’s Original Adaptive Path’s Original DiagramDiagram
The Real Life Diagram – How to The Real Life Diagram – How to explain it to your non-geek explain it to your non-geek
friendsfriends
THE COLLEGE PARTYTHE COLLEGE PARTY
The Bleak Situation The Bleak Situation
The Non-Ajax SolutionThe Non-Ajax Solution
• Figure out what is more important and Figure out what is more important and rank order of operation.rank order of operation.
• Should I clean the mess, get food, or Should I clean the mess, get food, or update the outdated music collection?update the outdated music collection?
• Perform one task and do the others Perform one task and do the others after each other. Hopefully I have after each other. Hopefully I have enough time!enough time!– Go to Store, Download Music, Clean Go to Store, Download Music, Clean
Apartment so it can be trashed again.Apartment so it can be trashed again.
The Ajax SolutionThe Ajax Solution
• Do multiple things at Do multiple things at once!once!
• Hire a maid to do the Hire a maid to do the cleaning!cleaning!
• Order delivery pizza! Order delivery pizza!
• And I can download And I can download new music while new music while others do the dirty others do the dirty work! Ajax Clean!work! Ajax Clean!
Benefits and Problems Benefits and Problems
• The Page WeightThe Page Weight
• Rendering PagesRendering Pages
• Maintain Page Maintain Page StateState
• Back, Forward, Back, Forward, and Refreshand Refresh
• Connection SpeedConnection Speed
• JavaScript!JavaScript!
XMLHttpRequest Limitations XMLHttpRequest Limitations
• No Cross Domain No Cross Domain RequestsRequests
• JavaScriptJavaScript DisabledDisabled
• Older BrowsersOlder Browsers
• Older ServersOlder Servers
• 508?508?
CROSS BROWSER CROSS BROWSER JAVASCRIPTJAVASCRIPT
The XHR ObjectThe XHR Object
• The Gecko / Safari / IE7 Object The Gecko / Safari / IE7 Object ConstructorConstructor– req = new XMLHttpRequest();req = new XMLHttpRequest();
• The ActiveX for IE 6 and earlierThe ActiveX for IE 6 and earlier– req = new req = new
ActiveXObject("Microsoft.XMLHTTP");ActiveXObject("Microsoft.XMLHTTP");
OROR– req = new req = new
ActiveXObject("Msxml2.XMLHTTP");ActiveXObject("Msxml2.XMLHTTP");
XHR Object Methods XHR Object Methods MethodMethod DescriptionDescription
abort() abort() Stops the current request Stops the current request
getAllResponseHeaders() getAllResponseHeaders() Returns all header (labels/value) Returns all header (labels/value) sets sets
getResponseHeader("headerLabelgetResponseHeader("headerLabel") ")
Returns value of a specified Returns value of a specified header label header label
open("method", "URL"[, open("method", "URL"[, asyncFlag[, "userName"[, asyncFlag[, "userName"[, "password"]]]) "password"]]])
The heart and soul! Sets The heart and soul! Sets destination URL, method, and destination URL, method, and other optional attributes other optional attributes
send(content) send(content) Transmits the request Transmits the request
setRequestHeader("label", setRequestHeader("label", "value") "value")
Assigns header to be sent with a Assigns header to be sent with a request request
XHR open()XHR open()
• open("method", "URL", open("method", "URL", asyncFlag); method = GET or asyncFlag); method = GET or POSTPOST
URL = Page to requestURL = Page to request
asyncFlag = True or FalseasyncFlag = True or False
XHR Object Properties XHR Object Properties PropertyProperty DescriptionDescription
onreadystatechange onreadystatechange Event handler for an event that fires Event handler for an event that fires at every state change at every state change
readyState readyState Object status integer Object status integer
responseText responseText String version of data returned from String version of data returned from server process server process
responseXML responseXML DOM-compatible document object of DOM-compatible document object of data returned from server process data returned from server process
status status Numeric code returned by server, Numeric code returned by server, such as 404 for "Not Found" or such as 404 for "Not Found" or 200 for 200 for "OK""OK"
statusText statusText String message accompanying the String message accompanying the status code status code
readyState values readyState values
• 0 – uninitialized0 – uninitialized
• 1 – loading1 – loading
• 2 – loaded2 – loaded
• 3 – interactive3 – interactive
• 4 – complete (Can process returned 4 – complete (Can process returned data!)data!)
BASIC DEMO TIMEBASIC DEMO TIME
JavaScript QuizJavaScript Quiz
• Quiz.....Quiz.....
Basic Ajax In Action Content Basic Ajax In Action Content LoaderLoader
var loader1 = new net.ContentLoader( var loader1 = new net.ContentLoader(
"RequestURL.aspx", "RequestURL.aspx",
FinishFunction, FinishFunction,
customErrorFunction, customErrorFunction,
"POST/GET", "POST/GET",
"POST Parameters"); "POST Parameters");
SecuritySecurity
• No different than a No different than a traditional traditional postbackpostback
• Check for SQL Check for SQL InjectionInjection
• Check for Check for JavaScript InjectionJavaScript Injection
• Validate the DataValidate the Data
Hack This FormHack This Form
• Basic Form Hack ExampleBasic Form Hack Example
Business Logic - Server or Business Logic - Server or Client Client
• Really depends on applicationReally depends on application
• SecuritySecurity
• Visual RenderingVisual Rendering
• Speed - Process data how many Speed - Process data how many times?times?
• Data size in response/requestData size in response/request
• XML, Strings, or JSON? XML, Strings, or JSON?
Ajax Developer Must Haves!Ajax Developer Must Haves!
• Drip IE Leak DetectorDrip IE Leak Detector
• Firefox ExtensionsFirefox Extensions•Adblock – Ah, just because!Adblock – Ah, just because!
•FirebugFirebug
•Selenium IDESelenium IDE
• JSViewJSView
•NOSCRIPTNOSCRIPT
•Modify HeadersModify Headers
Where to get more infoWhere to get more info
• My Blog: http://radio.javaranch.com/pascarelloMy Blog: http://radio.javaranch.com/pascarello
• Forum: Forum: http://www.javaranch.comhttp://www.javaranch.com
• Forum: Forum: http://www.intelliobjects.com/http://www.intelliobjects.com/
• Ajax News: Ajax News: http://www.Ajaxian.comhttp://www.Ajaxian.com
• Ajax In Action info: Ajax In Action info: http://www.manning.com/cranehttp://www.manning.com/crane
• Presentation files for this talk will be located at: Presentation files for this talk will be located at: http://www.pascarello.com/presentation/NOVA_Ajax/http://www.pascarello.com/presentation/NOVA_Ajax/
Larger DemosLarger Demos&&
Questions Questions
Recommended