Ajax In Action The Journey into Web2.0 Presented by Eric Pascarello

Author of:

Some Background Info HTML/JavaScript Moderator at JavaRanch.com Member since 2001 Ajax Developer at market10.com The world’s first job matching site

What is Ajax exactly?

Asynchronous JavaScript and XML Utilizes the XMLHttpRequest() Object. 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 Mozilla 1.0 / Firefox 1.0 / Netscape 7 Opera 8.01 / Opera Mobile Browser 8.0 Opera 8.01 / Opera Mobile Browser 8.0 Safari 1.2 / Konqueror 3.2 / iCab 3.0b352 Safari 1.2 / Konqueror 3.2 / iCab 3.0b352 Plus other minor browsers Plus other minor browsers

Ajax is…. Ajax is not…. Ajax is not a programming language. Ajax is not a programming language. Ajax is a methodology Ajax is a methodology Ajax works with the XMLHttpRequest Object. (JavaScript) 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 And your choice of ServerSide Technology

What started the hype?

Adaptive Path’s Original Diagram

The real life diagram THE COLLEGE PARTY

The Bleak Situation

The Non-Ajax Solution Figure out what is more important and rank order of operation. Figure out what is more important and rank order of operation. Should I clean the mess, get food, or update the outdated music collection? 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! 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! Do multiple things at once! Hire a maid to do the cleaning! Hire a maid to do the cleaning! Order delivery pizza! Order delivery pizza! And I can download new music while others do the dirty work! Ajax Clean! And I can download new music while others do the dirty work! Ajax Clean!

Benefits and Problems The Page Weight The Page Weight Rendering Pages Rendering Pages Maintain Page State Maintain Page State Back, Forward, and Refresh Back, Forward, and Refresh Connection Speed Connection Speed JavaScript! JavaScript!

Ajax Limitations No Cross Domain Requests No Cross Domain Requests JavaScript Disabled JavaScript Disabled Older Browsers Older Browsers Older Servers Older Servers 508? 508?

CROSS BROWSER JAVASCRIPT

The XHR Object The Gecko / Safari / IE7 Object Constructor The Gecko / Safari / IE7 Object Constructor –req = new XMLHttpRequest(); The ActiveX for IE 6 and earlier The ActiveX for IE 6 and earlier –req = new ActiveXObject("Microsoft.XMLHTTP"); OR –req = new ActiveXObject("Msxml2.XMLHTTP");

XHR Object Methods MethodDescription 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 open("method", "URL", asyncFlag); method = GET or POST URL = Page to request asyncFlag = True or False

XHR Object Properties PropertyDescription 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 0 – uninitialized 1 – loading 1 – loading 2 – loaded 2 – loaded 3 – interactive 3 – interactive 4 – complete (Can process returned data!) 4 – complete (Can process returned data!)

BASIC DEMO TIME

JavaScript Quiz Quiz..... Quiz..... Quiz.....

Basic Ajax In Action Content Loader var loader1 = new net.ContentLoader( "RequestURL.aspx", "RequestURL.aspx", FinishFunction, FinishFunction, customErrorFunction, customErrorFunction, "POST/GET", "POST/GET", "POST Parameters"); "POST Parameters");

Security No different than a traditional postback No different than a traditional postback Check for SQL Injection Check for SQL Injection Check for JavaScript Injection Check for JavaScript Injection Validate the Data Validate the Data

Hack This Form Basic Form Hack Example Basic Form Hack Example Basic Form Hack Example Basic Form Hack Example

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

Ajax Developer Must Haves! Drip IE Leak Detector Drip IE Leak Detector Firefox Extensions Firefox Extensions Adblock – Ah, just because! Adblock – Ah, just because! Firebug Firebug Selenium IDE Selenium IDE JSView JSView NOSCRIPT NOSCRIPT Modify Headers Modify Headers

Where to get more info My Blog: My Blog: Forum: Forum: Forum: Forum: Ajax News: Ajax News: Ajax In Action info: Ajax In Action info:

Larger Demos & Questions