AJAXDeveloping

Rich Internet Applications

-- Luqman Shareef

AJAX at one glanceAJAX at one glance

AAsynchronous synchronous JJavascript avascript AAnd nd XXMLML Uses DHTML , DOM, XMLHttpRequest Uses DHTML , DOM, XMLHttpRequest

and Javascriptand Javascript Rich Internet ApplicationsRich Internet Applications Partial Screen update, hence better Partial Screen update, hence better

user experienceuser experience Faster, and less bandwidth required.Faster, and less bandwidth required.

AJAX ExamplesAJAX Examples

Google Map (Google Map (http://maps.google.comhttp://maps.google.com)) Google Suggest (Google Suggest (http://www.google.com/webhp?http://www.google.com/webhp?

complete=1&hl=encomplete=1&hl=en)) GmailGmail ( (http://gmail.google.comhttp://gmail.google.com)) Yahoo Maps (Yahoo Maps (http://maps.yahoo.comhttp://maps.yahoo.com))

Why AJAX is Popular ?Why AJAX is Popular ? Rich Internet Application without FlashRich Internet Application without Flash Saves BandwidthSaves Bandwidth Downloads only data that is neededDownloads only data that is needed FasterFaster No Plug-in needed at client side.No Plug-in needed at client side.

Key Benefits of using Key Benefits of using AJAXAJAX

• Data-drivenData-driven (as opposed to page- (as opposed to page-driven)driven)– UI is handled in the client while the UI is handled in the client while the

server provides dataserver provides data

• Asynchronous CommunicationAsynchronous Communication– A user can continue to use the A user can continue to use the

application while the client program application while the client program requests information from the server in requests information from the server in the backgroundthe background

Synchronous Communication

Asynchronous Communication

Steps of AJAX OperationSteps of AJAX Operation A client event occursA client event occurs An XMLHttpRequest object is createdAn XMLHttpRequest object is created The XMLHttpRequest object is configuredThe XMLHttpRequest object is configured The XMLHttpRequest object makes an async. The XMLHttpRequest object makes an async.

requestrequest The request is processed by the Server.The request is processed by the Server. Server returns an XML document containing Server returns an XML document containing

the resultthe result The XMLHttpRequest object calls the The XMLHttpRequest object calls the

callback() function and processes the resultcallback() function and processes the result The HTML DOM is updatedThe HTML DOM is updated

XMLHttpRequest MethodsXMLHttpRequest Methods • • open(“HTTP method”, “URL”, syn/asyn)open(“HTTP method”, “URL”, syn/asyn)

– Assigns HTTP method, destination URL, modeAssigns HTTP method, destination URL, mode • • send(content)send(content)

– Sends request including string or DOM object dataSends request including string or DOM object data • • abort()abort()

– Terminates current requestTerminates current request • • getAllResponseHeaders()getAllResponseHeaders()

– Returns headers (labels + values) as a stringReturns headers (labels + values) as a string • • getResponseHeader(“header”)getResponseHeader(“header”)

– Returns value of a given headerReturns value of a given header • • setRequestHeader(“label”,”value”)setRequestHeader(“label”,”value”)

– Sets Request Headers before sendingSets Request Headers before sending

XMLHttpRequest PropertiesXMLHttpRequest Properties onreadystatechangeonreadystatechange

– Set with an JavaScript event handler that fires Set with an JavaScript event handler that fires at each changeat each change

readyStatereadyState – current status of request – current status of request0 = uninitialized0 = uninitialized1 = loading1 = loading2 = loaded2 = loaded3 = interactive (some data has been returned)3 = interactive (some data has been returned)4 = complete4 = complete

statusstatus– HTTP Status returned from server: 200 = OKHTTP Status returned from server: 200 = OK

XMLHttpRequest PropertiesXMLHttpRequest Properties

responseTextresponseText– String version of data returned from the String version of data returned from the

serverserver responseXMLresponseXML

– XML document of data returned from the XML document of data returned from the serverserver

statusTextstatusText– Status text returned from serverStatus text returned from server

Browsers Which SupportBrowsers Which SupportXMLHttpRequestXMLHttpRequest

Mozilla Firefox 1.0 and aboveMozilla Firefox 1.0 and above Netscape version 7.1 and aboveNetscape version 7.1 and above Apple Safari 1.2 and above.Apple Safari 1.2 and above. Microsoft Internet Exporer 5 and Microsoft Internet Exporer 5 and

aboveabove KonquerorKonqueror Opera 7.6 and aboveOpera 7.6 and above

United Chemical Sales ToolUnited Chemical Sales Tool Reworked some of their application w/AJAXReworked some of their application w/AJAX

Performance GainsPerformance Gains– Amount of Data Transfer 73% LessAmount of Data Transfer 73% Less– Transaction Time (LAN) 32% LessTransaction Time (LAN) 32% Less– Transaction Time (WAN) 68% LessTransaction Time (WAN) 68% Less

• • Typical TransactionTypical Transaction– $20/Hour Labor Cost$20/Hour Labor Cost– 50,000 transaction/year50,000 transaction/year– 36 seconds saved per transaction36 seconds saved per transaction– AJAX Cost Savings: $10,000AJAX Cost Savings: $10,000

Hourly Labor * (Seconds Saved * # of Transactions / Hourly Labor * (Seconds Saved * # of Transactions / 3600)3600)

What’s Not to Like…What’s Not to Like… You have to program in JavascriptYou have to program in Javascript

– Need libraries + frameworks to make it easierNeed libraries + frameworks to make it easier • • You have to program against the browser DOMYou have to program against the browser DOM

– Differences between browser implementationsDifferences between browser implementations • • Lots of HTTP requests to serverLots of HTTP requests to server

– Requests are smaller howeverRequests are smaller however– Total bandwidth may not go upTotal bandwidth may not go up

• • If you want client/server, why not use a real If you want client/server, why not use a real client/server system?client/server system?– .NET can access Web Services on your Java boxes.NET can access Web Services on your Java boxes– Why not Flash/Flex?Why not Flash/Flex?– Tons of good third-party rich client systemsTons of good third-party rich client systems

• • TestingTesting– Cross-browser quirksCross-browser quirks– New browser versionsNew browser versions

• • No Back ButtonNo Back Button– Is this a bad thing?Is this a bad thing?

LimitationsLimitations Increased complexity using Javascript Increased complexity using Javascript

and DHTMLand DHTML Breaks back button support Breaks back button support URL's don't change as state changes URL's don't change as state changes Cross Browser Issues can be a pain Cross Browser Issues can be a pain Can't access domains other than the Can't access domains other than the

calling domain calling domain May be disabled (for security reasons) May be disabled (for security reasons)

or not available on some browsers or not available on some browsers

www.ajaxmatters.comwww.ajaxmatters.com www.ajaxian.comwww.ajaxian.com www.ajaxpatterns.orgwww.ajaxpatterns.org www.ajaxtags.comwww.ajaxtags.com

Thank You