Ajax In Action Ajax In Action The Journey into Web2.0The Journey into Web2.0

Presented by Eric PascarelloPresented by Eric Pascarello

Author of:Author of:

Some Background InfoSome Background Info

HTML/JavaScript HTML/JavaScript Moderator at Moderator at

JavaRanch.com JavaRanch.com

Member since 2001Member since 2001

Ajax Developer at Ajax Developer at market10.commarket10.com

The world’s first job The world’s first job matching sitematching site

What is Ajax exactly?What is Ajax exactly?

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 copied Microsoft The other browsers copied 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

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

What started the hype?What started the hype?

Adaptive Path’s Original Adaptive Path’s Original DiagramDiagram

The real life diagramThe real life diagram

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!

Ajax Limitations Ajax 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

Larger DemosLarger Demos&&

Questions Questions